js jquery手指滑动，上滑，下滑，左滑，右滑，事件监听

た入场券 2022-09-11 05:20 231阅读 0赞

var startX;
    var startY;
    var moveEndX
    var moveEndY
    var X
    var Y
    
    
    $("body").on("touchstart", function (e) {
        
    
        startX = e.originalEvent.changedTouches[0].pageX,
            startY = e.originalEvent.changedTouches[0].pageY;
    });
    
    $("body").on("touchmove", function (e) {
        
        moveEndX = e.originalEvent.changedTouches[0].pageX
        moveEndY = e.originalEvent.changedTouches[0].pageY
        X = moveEndX - startX
        Y = moveEndY - startY
    
        if (X > 0) {
        
            alert("left 2 right");
        }
        else if (X < 0) {
        
            alert("right 2 left");
        }
        else if (Y > 0) {
        
            alert("top 2 bottom");
        }
        else if (Y < 0) {
        
            alert("bottom 2 top");
        }
        else {
        
            alert("just touch");
        }
    });
    
    $(".container").on("touchend",function(e){
        
        moveEndX = e.originalEvent.changedTouches[0].pageX
        moveEndY = e.originalEvent.changedTouches[0].pageY
        X = moveEndX - startX
        Y = moveEndY - startY
    
        if (X > 0) {
        
            // alert("left 2 right");
            console.log("上一个")
            prev_pic();
        }
        else if (X < 0) {
        
            // alert("right 2 left");
            console.log("下一个")
            next_pic()
        }
        else if (Y > 0) {
        
            // alert("top 2 bottom");
        }
        else if (Y < 0) {
        
            // alert("bottom 2 top");
        }
        else {
        
            // alert("just touch");
        }
    })

参考博客：  
[js判断手指的上滑，下滑，左滑，右滑，事件监听][js]

[js]: https://www.cnblogs.com/gopark/p/9338549.html