touchstart,touchmove判断手机中滑屏方向

Posted 2020-08-24 雪松

滑动屏幕    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;
    //获取滑动距离
    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(\'往下滑动\');
    }else{
        console.log(\'点击未滑动\');
    }

});