简易移动端上下左右滑动事件

最新推荐文章于 2023-06-17 18:35:34 发布

weixin_30662011

最新推荐文章于 2023-06-17 18:35:34 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/chenzeyongjsj/p/7008392.html

版权

// 移动端滑动事件
                $("body").on("touchstart", function (e) {
                    e.preventDefault();
                    startX = e.originalEvent.changedTouches[0].pageX,
                        startY = e.originalEvent.changedTouches[0].pageY;
                });
                $("body").on("touchmove", function (e) {
                    e.preventDefault();
                    moveEndX = e.originalEvent.changedTouches[0].pageX,
                        moveEndY = e.originalEvent.changedTouches[0].pageY,
                        X = moveEndX - startX,
                        Y = moveEndY - startY;

                    if (Math.abs(X) > Math.abs(Y) && X > 0) {
                        //alert("left 2 right");
                    }
                    else if (Math.abs(X) > Math.abs(Y) && X < 0) {
                        //alert("right 2 left");
                    }
                    else if (Math.abs(Y) > Math.abs(X) && Y > 0 && canSlide) {
                        scrollUp();
                    }
                    else if (Math.abs(Y) > Math.abs(X) && Y < 0 && canSlide) {
                        scrollDown();
                    }
                    else {
                        //alert("just touch");
                    }
                });