js判断手机的左右滑动

最新推荐文章于 2024-11-23 15:32:37 发布

iteye_3821

最新推荐文章于 2024-11-23 15:32:37 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/iteye_3821/article/details/82679902

js代码

$(function() {
    function judge() {
        var startx;//让startx在touch事件函数里是全局性变量。
        var endx;
        var el = document.getElementById('io');//触摸区域。
        function cons() {   //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。
            if (startx > endx) {  //判断左右移动程序
                alert("left");
            } else {
                alert("right");
            }
        }

        el.addEventListener('touchstart', function (e) {
            var touch = e.changedTouches;
            startx = touch[0].clientX;
            starty = touch[0].clientY;
        });
        el.addEventListener('touchend', function (e) {
            var touch = e.changedTouches;
            endx = touch[0].clientX;
            endy = touch[0].clientY;
            cons();  //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。
        });
    }

    judge();
})

html的话只要id对应就可以了

<body>
    <div style="width: 100%;height: 3000px;background: #08c;" id="io">

    </div>
</body>