touchstart,touchmove判斷手機中滑屏方向

標籤：

滑動螢幕    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(‘點擊未滑動‘);    }});

 

touchstart,touchmove判斷手機中滑屏方向