美文网首页
jQuery -- touch事件滑动判断

jQuery -- touch事件滑动判断

作者: SailingBytes | 来源:发表于2019-03-20 18:05 被阅读0次

监听 touchstart、touchend 事件

let startX,startY;

$("body").on("touchstart", (e) => {

    startX = e.originalEvent.changedTouches[0].pageX,

    startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchend", (e) =>{                      

    const moveEndX = e.originalEvent.changedTouches[0].pageX,

    const moveEndY = e.originalEvent.changedTouches[0].pageY,

    const X = moveEndX - startX,

    const Y = moveEndY - startY;

    if(X > 0){  //左滑

        alert('左滑');               

    } else if(X < 0){ //右滑

        alert('右滑');   

    } else if(Y > 0){ //下滑

        alert('下滑');   

    } else if(Y < 0){ //上滑

        alert('上滑');   

    } else{ //单击

        alert('单击');   

    }

});

处理默认行为

if(e.cancelable){       //判断默认行为是否可以被禁用    

    if(!e.defaultPrevented){      //判断默认行为是否已经被禁用            

        e.preventDefault();       

    }   

}  

相关文章

网友评论

      本文标题:jQuery -- touch事件滑动判断

      本文链接:https://www.haomeiwen.com/subject/pomtvqtx.html