jquery手势滑动监控代码及取消某个标签的手势事件

悠悠 2023-06-06 08:04 11阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./js/jquery.js"></script>
        <script>
            $(function () {
                var startY=endY=0;
                //手势开始滑动
                $('body').on('touchstart',function(e) {
                    var touch = e.originalEvent.targetTouches[0];
                    startY = touch.pageY;//开始点在页面的 y 坐标
                    console.log('---->'+startY);
                });
                //手势正在滑动
                $('body').on('touchmove',function(e) {
                    var touch = e.originalEvent.targetTouches[0];
                    var y= touch.pageY;
                });
                //手势滑动结束
                $('body').on('touchend',function(e) {
                    var touch = e.originalEvent.changedTouches[0];
                    var endY = touch.pageY;//滑动结束时在页面的 y 坐标
                    //根据开始和结束的坐标差就能知道是上滑还是下滑
                    console.log(startY-endY);
                    var cha=startY-endY;
                    if(cha<-10){
                        //下滑   上一页
                        console.log('下滑==========>'+cha)
                    }else if(cha>10){
                        //上滑   下一页
                        console.log('上滑==========>'+cha)
                    }
                });
            });
        </script>
        <style>
            *{marign:0px;padding:0px;}
            #main{width:100%;height:1024px;background-color:#00b7ee;}
        </style>
    </head>
    <body>
    <div id="main" >
    
    </div>
    </body>
    </html>

### **上面是整体滑动的效果** ###

### **如果要在滑动效果上，又有内容需要有滚动条，就需要禁止这个标签的滑动事件(jquery写法)** ###

$('#removes').on('touchend',function (event) {
        return false;
    });