手机端滑动触摸事件

灵云JS

已于 2023-03-02 11:33:25 修改

阅读量153

点赞数

文章标签： javascript Powered by 金山文档

于 2023-02-10 14:37:05 首次发布

本文链接：https://blog.csdn.net/weixin_68353232/article/details/128969524

版权

获取Dom元素然后监听滑动触摸事件

计算元素在页面起始值再获取元素偏移的值

用偏移的值减去起始值就是目标元素移动的具体值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .A{
            width: 1500px;
            height: 300px;
            background-color: black;
        }
        .B{
            width: 1500px;
            height: 300px;
            background-color: blue;
        }
        .C{
            width: 1500px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>

 <body>
        <ul>
        <li class="A">b</li>
        <li class="B">c</li>
        <li class="C">d</li>
        </ul>

        <script>
        // 手机端滑动监听
        var startX, startY, moveEndX, moveEndY, X, Y;
        document.querySelector('.C').addEventListener('touchstart', function(e) {
            startX = e.touches[0].pageX;
            startY = e.touches[0].pageY;
        });
        document.querySelector('.C').addEventListener('touchmove', function(e) {
            moveEndX = e.changedTouches[0].pageX;
            moveEndY = e.changedTouches[0].pageY;
            X = moveEndX - startX;
            Y = moveEndY - startY;
            if ( X > 0 ) {
                console.log('向右');
            }else if ( Y > 0 ) {
                console.log('向下');
            }else if ( Y < 0 ) {
                console.log('向上');
            }else if ( X < 0 ) {
                console.log('向左');
            }else{
                console.log('没滑动');
            }
        });
    </script>
    </body>
</html>