移动端判断触摸的方向

Posted Jo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端判断触摸的方向相关的知识，希望对你有一定的参考价值。

最近做微信端页面，于是趁周末梳理了下移动端的事件这一块。

通过判断手指在屏幕上移动的位置减去手指放在屏幕上时的位置，就可以得出是往什么方向滑动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="d"></div>
    <script type="text/javascript">
        var d = document.getElementById(‘d‘),
            startX,startY,moveX,moveY;

        d.addEventListener(‘touchstart‘,function(e){
            var target = e.targetTouches[0];
            startX = target.clientX,
            startY = target.clientY;
        });

        d.addEventListener(‘touchmove‘,function(e){
            var target = e.targetTouches[0];
            moveX = target.clientX;
            moveY = target.clientY;

            var x = moveX - startX,
                y = moveY - startY;

            // 如果x>0并且x轴上移动的距离大于y轴上移动的距离
            if(Math.abs(x) > Math.abs(y) && x > 0){
                alert(‘向右‘);
            }
            else if(Math.abs(x) > Math.abs(y) && x < 0){
                alert(‘向左‘);
            }
            else if(Math.abs(x) < Math.abs(y) && y > 0){
                alert(‘向下‘);
            }
            else if(Math.abs(x) < Math.abs(y) && x < 0){
                alert(‘向上‘);
            }
        });

    </script>
</body>
</html>

这里是通过计算得出来的x轴的距离跟y轴的距离相比较来判断的。

以上是关于移动端判断触摸的方向的主要内容，如果未能解决你的问题，请参考以下文章

手机端触摸的方向判断

移动端滑屏全应用滑屏封装注意事项与移动端轮播

javascript 在移动端怎么做到左右触摸事件 ontouchmove吗？求代码

移动端页面触摸滑动

移动端滑动方向判断

移动端 uni-app 滑动事件 精确判断手指滑动方向