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

Question

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

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

$("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");
    }
});