JS-移動端判斷上拉和下滑

標籤：slide   圖片   bre   change   rtx   code   bsp   ase   dev   

一、手指觸屏，利用touchstart和touchend計算前後滑動距離，判斷是上拉還是下滑。

二、js中距離：pageY、clientY、offsetY的區別：

       offsetY:相對於父節點的位移距離。

       clientY:相對於瀏覽器，滾輪距離不算在內。

       pageY:相對於瀏覽器，滾輪滾動的距離算在內；本例中，用pageY，觸屏時記錄位置-startY，結束時記錄-endY，兩個相減以正負判斷是上移還是下滑。

 

     

三、touchstart有touches屬性，touchend有changedTouches屬性，兩個屬性中分別有pageY、pageX資訊。

//滑動處理        var startX, startY;        document.addEventListener(‘touchstart‘,function (ev) {            startX = ev.touches[0].pageX;            startY = ev.touches[0].pageY;        }, false);         document.addEventListener(‘touchend‘,function (ev) {            var endX, endY;            endX = ev.changedTouches[0].pageX;            endY = ev.changedTouches[0].pageY;            var direction = GetSlideDirection(startX, startY, endX, endY);            switch(direction) {                case 0:                        alert("無操作");                    break;                case 1:                    // 向上                    alert("up");                    break;                case 2:                    // 向下                    alert("down");                    break;                 default:            }        }, false);

function GetSlideDirection(startX, startY, endX, endY) {            var dy = startY - endY;            //var dx = endX - startX;            var result = 0;            if(dy>0) {//向上滑動                result=1;            }else if(dy<0){//向下滑動                result=2;            }            else            {                result=0;            }            return result;        }

 

JS-移動端判斷上拉和下滑