移动端事件

最新推荐文章于 2024-07-15 15:13:08 发布

Leona__

最新推荐文章于 2024-07-15 15:13:08 发布

阅读量54

点赞数

文章标签： css html 移动开发

本文链接：https://blog.csdn.net/Leona__/article/details/121375071

版权

事件类型

事件名	说明
touchstart	手指触摸开始事件
touchmove	手指移动事件
touchend	手指离开事件

使用：与PC端点击事件相同

属性

跟踪触摸属性

属性名	说明
touches	返回屏幕上触点的数组
changedTouches	返回出发事件触点的数组
targetTouches	返回事件被触发时，该元素上触点的数组

宽高属性

属性名	说明
clientX/Y	视口坐标
pageX/Y	文档坐标
screenX/Y	屏幕坐标

示例

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: relative;
        }

        p {
            width: 200px;
            height: 20px;
            position: absolute;
            top: 50%;
            font-size: 16px;
            text-align: center;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        var p = document.getElementsByTagName("p")[0];

        div.addEventListener("touchstart", function (e) {
            var x = e.changedTouches[0].clientX.toFixed(2);
            var y = e.changedTouches[0].clientY.toFixed(2);
            p.innerHTML = "该点坐标" + x + ";" + y;
        })
    </script>
</body>

</html>

样式如下：
在这里插入图片描述

今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）

Leona__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端事件

事件类型事件名说明touchstart手指触摸开始事件touchmove手指移动事件touchend手指离开事件使用：与PC端点击事件相同属性跟踪触摸属性属性名说明touches返回屏幕上触点的数组changedTouches返回出发事件触点的数组targetTouches返回事件被触发时，该元素上触点的数组宽高属性属性名说明clientX/Y视口坐标pageX/Y文档坐标s
复制链接

扫一扫