touch事件的学习记录

最新推荐文章于 2024-01-15 21:39:52 发布

新时代的弩力

最新推荐文章于 2024-01-15 21:39:52 发布

阅读量100

点赞数

分类专栏： JavaScript DOM

本文链接：https://blog.csdn.net/qq_42372534/article/details/112760597

版权

JavaScript 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

DOM

3 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="div"></div>


    <script>
        const div = document.querySelector('.div')

        div.addEventListener('touchstart', touchHandler)
        div.addEventListener('touchmove', touchHandler)
        div.addEventListener('touchend', touchHandler)
        var startX, startY, endX, endY;
        //监听触摸事件
        function touchHandler(event) {
            var direction = {
                0: "没滑动",
                1: "上滑",
                2: "下滑",
                3: "左滑",
                4: "右滑",
            }
            switch (event.type) {
                //event.touches[0]和event.changedtouched[0]中存放了触摸操作的信息，触摸操作的默认行为也就是滚动页面
                case "touchstart"://触摸开始
                    startX = event.touches[0].pageX
                    startY = event.touches[0].pageY
                    // console.log(startX, startY)
                    break;
                case "touchmove"://触摸移动
                    endX = event.changedTouches[0].pageX
                    endY = event.changedTouches[0].pageY
                    // console.log(endX, endY)
                    var result = direction[getDirection(startX, startY, endX, endY).toString()]
                    console.log(result)
                    break;
                case "touchend"://触摸结束
                    endX = event.changedTouches[0].pageX
                    endY = event.changedTouches[0].pageY
                    //    console.log(endX,endY)
                    break;
                default: break;
            }


        }

        //根据坐标返回滑动方向
        function getDirection(startX, startY, endX, endY) {
            var dy = startY - endY//pageY与正常坐标系Y轴相反
            var dx = endX - startX
            var angle = getAngle(dy, dx);
            var direction;

            if (Math.abs(dy) < 2 && Math.abs(dx) < 2) {
                direction = 0;//没有滑动
            }
            if (angle >= -45 && angle < 45) {
                direction = 4;//right
            } else if (angle >= 45 && angle < 135) {
                direction = 1;//up
            } else if (angle >= -135 && angle < -45) {
                direction = 2//down
            } else if (angle < -135 && angle >= -180 || angle >= 135 && angle <= 180) {
                direction = 3//left
            }
            return direction;

        }
        //根据坐标增量返回角度,也就是以触摸点为原坐标，向上为Y轴正方向,范围为[180,-180)
        //Math.atan2(dy,dx)是核心方法
        function getAngle(dy, dx) {
            return Math.atan2(dy, dx) * 180 / Math.PI
        }

    //    console.log(getAngle(1,1),getDirection(10,10,20,150))
    //    console.log(getAngle(1,-1))
    //    console.log(getAngle(-1,1))
    //    console.log(getAngle(-0.01,-1))
    </script>
</body>

</html>

原文参考链接

新时代的弩力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
touch事件的学习记录

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div { ..
复制链接

扫一扫

专栏目录