美文网首页我爱编程
手机端左右滑动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