美文网首页我爱编程
手机端左右滑动jquery

手机端左右滑动jquery

作者: 喵呜Yuri | 来源:发表于2018-04-03 17:54 被阅读26次

思路是通过滑动开始点的X,Y坐标点和滑动结束时X,Y坐标点进行比较得出是想那个方向滑动的

/*判断手机端左滑右滑动*/
$("body").on("touchstart", function(e) {
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchend", function(e) {
    // 判断默认行为是否可以被禁用
//这段有代码的话,会阻止冒泡,你页面中body内元素的其他动作都执行不了了
   // 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 ) {
        console.log('左滑');
    }
    //右滑
    else if ( X < 0 ) {
        console.log('右滑');
    }
    //下滑
    else if ( Y > 0) {
        console.log('下滑');
    }
    //上滑
    else if ( Y < 0 ) {
        console.log('上滑');
    }
    //单击
    else{
        console.log('单击');
    }
});

相关文章

网友评论

    本文标题:手机端左右滑动jquery

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