JavaScript 移动端触屏事件——0618

最新推荐文章于 2022-07-29 14:58:43 发布

daisy0328

最新推荐文章于 2022-07-29 14:58:43 发布

阅读量126

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/daisy0328/article/details/106871526

版权

web前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

移动端触屏事件

touch 三种状态 start move end；
根据起始和终止坐标点判断滑的方向，触屏的坐标点在 e.Touches 里边；
e.Touches 返回的是TouchList 集合。

touchstart 事件里边给startX、startY 赋值；
touchmove 事件里边给endX、endY 赋值；
touchend 事件里边判断滑的方向。

代码如下：

<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>手机端触屏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<script>
    /*
     * 移动端触屏
     * touch 三种状态 start move end
     * e.Touches 返回的是TouchList 集合
     * */
    var body = document.body;
    var startX, endX, startY, endY;
    body.addEventListener("touchstart", function (e) {
        var touches = e.touches;
        startX = touches[0].pageX;
        startY = touches[0].pageY;
    });
    body.addEventListener("touchmove", function (e) {
        var touches = e.touches;
        endX = touches[0].pageX;
        endY = touches[0].pageY;
    });
    body.addEventListener("touchend", function (e) {
        //这个事件里面做最终的判断
        if (startX && startY && endX && endY) {
            var cx = endX - startX;
            var cy = endY - startY;
            if (Math.abs(cx) < Math.abs(cy) && cy < 0) {
                console.log("上滑");
            }
            if (Math.abs(cx) < Math.abs(cy) && cy > 0) {
                console.log("下滑");
            }
            if (Math.abs(cx) > Math.abs(cy) && cx < 0) {
                console.log("左滑");
            }
            if (Math.abs(cx) > Math.abs(cy) && cx > 0) {
                console.log("右滑");
            }
            startX = null;
            startY = null;
            endX = null;
            endY = null;
        }
    })
</script>
</body>

daisy0328

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 移动端触屏事件——0618

移动端触屏事件touch 三种状态 start move end；根据起始和终止坐标点判断滑的方向，触屏的坐标点在 e.Touches 里边；e.Touches 返回的是TouchList 集合。touchstart 事件里边给startX、startY 赋值；touchmove 事件里边给endX、endY 赋值；touchend 事件里边判断滑的方向。代码如下：<head> <meta name="viewport" content=
复制链接

扫一扫

专栏目录