手机端H5页面配合jquery获取用户滑动屏幕事件并得出滑动的方向

news/2024/7/10 23:25:33 标签: jquery, javascript, 前端

单独一个事件是实现不了的,我们需要两个事件配合使用

javascript"> $("body").on("touchstart", function (e) {
   e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function (e) {
    e.preventDefault();
    moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;

    if (Math.abs(X) > Math.abs(Y) && X > 0) {
        alert("向右滑动");
    }
    else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        alert("向左滑动");
    }
    else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
        alert("向下滑动");
    }
    else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
        alert("向上滑动");
    }
    else {
        alert("just touch");
    }
});

http://www.niftyadmin.cn/n/1037774.html

相关文章

JAVA基础---JAVA 异常分类及处理(蓦然回首,夯实基础)

1. 概念 如果某个方法不能按照正常的途径完成任务&#xff0c;就可以通过另一种路径退出方法。在这种情况下会抛出一个封装了错误信息的对象。此时&#xff0c;这个方法会立刻退出同时不返回任何值。另外&#xff0c;调用这个方法的其他代码也无法继续执行&#xff0c;异常处理…

uni-app图片上传和图片预览功能实现

图片上传用到的是 uni.chooseImage 演示代码如下 uni.chooseImage({//可上传的最大数量count:5,//上传成功后的回调success: res >{//答应返沪信息 res.tempFilePaths返回的是你上传的所以图片的路径数组console.log(res.tempFilePaths)}})实现图片预览用到了uni.previewIm…

centos安装gcc

centos安装gcc 本来以为只要yum -y install gcc就可以了&#xff0c;没想到报错了&#xff0c;如下 couldn’t resolve host ‘mirrorlist.centos.org’ 貌似是网络的问题 于是ping 114.114.114.114&#xff0c;发现网络没问题 再次ping www.baidu.com&#xff0c;出现问题 那…

Intervention] Unable to preventDefault inside passive event listener due to target being treated as

有时我们使用ontouchstart和ontouchmove时控制台会报错 这种系统拦截的报错总会让人有些迷茫 其实解决也很简单 在css中加入 * {touch-action: pan-y;}

java线程底层源码学习

文章目录java线程底层源码学习c语言线程例子操作系统层面的线程创建java调用cc回调java线程调用链&#xff08;个人理解&#xff09;java线程底层源码学习 用了这么久的线程&#xff0c;都不知道底层到底怎么实现的&#xff0c;觉得有必要花时间研究一下。 c语言线程例子 这…

那些有趣的注释派画家

小狗狗能有什么坏心眼 高级攻城狮 去吧&#xff0c;皮卡丘&#xff01; 用键盘写的键盘 咔 中国龙 我佛慈悲 吾已放弃 递归:了解一下 环环相扣 紫牌警告 神兽护佑&#xff01; 这才叫神兽 知识就是力量 妈妈我爱敲码

JAVA基础---反射(蓦然回首,夯实基础)

1. 动态语言 动态语言&#xff0c;是指程序在运行时可以改变其结构&#xff1a;新的函数可以引进&#xff0c;已有的函数可以被删除等结构上的变化。比如常见的 JavaScript 就是动态语言&#xff0c;除此之外 Ruby,Python 等也属于动态语言&#xff0c;而 C、C则不属于动态语言…

线程池原理剖析一

文章目录线程池原理剖析一线程池的好处线程池的提交策略线程池例子参考书籍线程池原理剖析一 线程池的好处 1&#xff1a;复用线程&#xff0c;降低线程创建销毁导致的资源浪费。 2&#xff1a;提高系统响应速度&#xff0c;任务到达时&#xff0c;不需要等待创建线程。 3&am…