touch滑动判断方向

最新推荐文章于 2023-06-27 08:30:00 发布

艹莓

最新推荐文章于 2023-06-27 08:30:00 发布

阅读量561

点赞数

CC 4.0 BY-SA版权

分类专栏： js html5

本文链接：https://blog.youkuaiyun.com/qq_28949495/article/details/53895511

js 同时被 2 个专栏收录

34 篇文章

订阅专栏

html5

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的触摸屏滑动方向检测方法。通过监听touchstart、touchmove及touchend事件，可以准确地捕捉用户在触摸屏上的上下滑动行为，并在控制台输出相应的滑动方向提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    var startX = 0,
        startY = 0;
    function touchStart(evt){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //记录触点初始位置
            startX = x;
            startY = y;
        }catch(e){
            console.log(e.message)
        }
    }

    function touchMove(){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //判断滑动方向
            if (y - startY>0) {
                console.log('下滑了！');
            }else{
                console.log('上滑了！');
            }
        }catch(e){
            console.log(e.message)
        }
    }

    function touchEnd(){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //判断滑动方向
            if (y - startY>0) {
                console.log('下滑了！');
            }else{
                console.log('上滑了！');
            }
        }catch(e){
            console.log(e.message)
        }
    }

    //绑定事件
    function bindEvent(){
        document.addEventListener('touchstart',touchStart,false);
        document.addEventListener('touchmove',touchMove,false);
        document.addEventListener('touchend',touchEnd,false);
    }

</script>