移动端网页判断手指触摸滑动的方向

发布于 2019-05-08 字数 2587 浏览 779 评论 0

如今的应用也是越来越人性化,比如继续向上滑动或者向下滑动,加载更多内容,这些便捷的操作我们在网页中也可以实现,首先第一步就是判断用户手指触摸滑动的方向。

移动端网页判断手指触摸滑动的方向

判断用户手指滑动的方向,一种比较通用的解决方法就是,记录用户手指刚接触屏幕的位置,然后减去用户手指离开屏幕的位置,然后判断这个值的正负。

$("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 ( X > 0 ) {
        alert("left 2 right");
    } else if ( X < 0 ) {
        alert("right 2 left");
    } else if ( Y > 0) {
        alert("top 2 bottom");
    } else if ( Y < 0 ) {
        alert("bottom 2 top");
    } else{
        alert("just touch");
    }
});

判断很简单,touchmove 的最后坐标减去 touchstart 的起始坐标,X 的结果如果正数,则说明手指是从左往右划动;X 的结果如果负数,则说明手指是从右往左划动;Y 的结果如果正数,则说明手指是从上往下划动;Y 的结果如果负数,则说明手指是从下往上划动。 这再逻辑上没有任何问题。但在实际操作中,手指的上下滑动其实是很难直上直下的,只要稍微有点斜,就会被X轴的判断先行接管。 那么接下来我们就需要梁逸峰同学附体,加上特别的判断技巧:

$("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("left 2 right");
    } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
        alert("right 2 left");
    } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
        alert("top 2 bottom");
    } else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
        alert("bottom 2 top");
    } else{
        alert("just touch");
    }
});

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!