美文网首页
jQuery -- touch事件之滑动判断(左右上下方向)

jQuery -- touch事件之滑动判断(左右上下方向)

作者: 下班再说 | 来源:发表于2020-03-11 14:51 被阅读0次

$("body").on("touchstart", function(e){ // 判断默认行为是否可以被禁用 if (e.cancelable) {

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

            e.preventDefault();

        }

    } 

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

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

});

$("body").on("touchend", function(e){       

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

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

            e.preventDefault();

        }

    }             

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

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

    X = moveEndX - startX,

    Y = moveEndY - startY;

    //左滑    if ( X > 0 ) {

        alert('左滑');               

    }

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

        alert('右滑');   

    }

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

        alert('下滑');   

    }

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

        alert('上滑');   

    }

    //单击    else{

        alert('单击');   

    }

});

相关文章

网友评论

      本文标题:jQuery -- touch事件之滑动判断(左右上下方向)

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