首页 > 代码库 > 关于手机端 手势滑动的方向的判断（方式一）

关于手机端 手势滑动的方向的判断（方式一）

2024-09-22 09:21:11   206人阅读

滑动屏幕    touchstart:接触屏幕时触发，touchmove:活动过程触发，touchend:离开屏幕时触发

首先获取手接触屏幕时的坐标X,Y

//获取接触屏幕时的X和Y
$(‘body‘).bind(‘touchstart‘,function(e){
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});

　　然后获取滑动的坐标，并使用后面的坐标减去前面的坐标，通过获取的值判断其滑动方向。因为手滑动方向一般不是水平或者垂直的，所以可使用Math.abs()进行比较，比如：像右上角滑动，当往上滑动的距离大于往右的距离时，取其往上滑动的距离，即往上滑动。

$(‘body‘).bind(‘touchmove‘,function(e){
    //获取滑动屏幕时的X,Y
    endX = e.originalEvent.changedTouches[0].pageX,
    endY = e.originalEvent.changedTouches[0].pageY;
　　

var distanceX = moveEndX - startX;
var distanceY = moveEndY - startY;
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
alert("您向 右 滑动！");
}
else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
alert("您向 左 滑动！");
}
else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
alert("您向 下 滑动！");
}
else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
alert("您向 上 滑动！");
}
else { alert("您转了好多圈，回到了原点！！"); }

 

});

　　顺便提下：

1、Math.abs();函数是用来获取取得正数和负数的绝对值；
2、绑定元素的事件是需要写在当页面加载完成后的事件当中，或者是封装成函数，在页面加载后进行调用；
3、e.originalEvent.changedTouches[0].pageY/X，本人在编写时changedTouches时是没有智能提示的，需要小心和注意下；


希望对各位同仁有所帮助，好好学习，天天向上！！

关于手机端 手势滑动的方向的判断（方式一）


联系
我们