web移动前端页面，jquery判断页面滑动方向

最新推荐文章于 2021-12-18 18:43:15 发布

转载最新推荐文章于 2021-12-18 18:43:15 发布 · 633 阅读

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript在触摸屏设备上判断用户滑动方向的方法。通过监听touchstart和touchmove事件，获取触点的起始和结束位置，进而计算滑动距离并判断滑动方向。该方法区分了上下左右四个主要滑动方向。

/*判断上下滑动：*/
$('body').bind('touchstart',function(e){
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").bind("touchmove",function(e){
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[0].pageX;
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX-startX;
distanceY = endY-startY;
//判断滑动方向
if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
console.log('往右滑动');
}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
console.log('往左滑动');
}else
if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
console.log('往上滑动');
} else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
console.log('往下滑动');