触摸事件(touchstart、touchmove和touchend)

最新推荐文章于 2024-08-19 19:47:14 发布

笑道三千

最新推荐文章于 2024-08-19 19:47:14 发布

阅读量2w

点赞数 8

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_42349568/article/details/109240923

版权

JS 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

触摸事件是网页和应用程序中处理用户触摸交互的关键。touchstart、touchmove和touchend事件分别对应手指接触屏幕、滑动和离开屏幕时触发。每个事件携带了touches、targetTouches和changedTouches属性，用于追踪触摸状态。Touch对象包含坐标和目标节点信息，便于开发者构建响应触摸的操作。这些事件在移动设备上的互动设计中扮演重要角色。

摘要由CSDN通过智能技术生成

触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：

　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。
　　touchend事件：当手指从屏幕上离开的时候触发。

除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。
　　touches：表示当前跟踪的触摸操作的touch对象的数组。
　　targetTouches：特定于事件目标的Touch对象的数组。
　　changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
　　
　　每个Touch对象包含的属性如下。
　　clientX：触摸目标在视口中的x坐标。
　　clientY：触摸目标在视口中的y坐标。
　　identifier：标识触摸的唯一ID。
　　pageX：触摸目标在页面中的x坐标。
　　pageY：触摸目标在页面中的y坐标。
　　screenX：触摸目标在屏幕中的x坐标。
　　screenY：触摸目标在屏幕中的y坐标。
　　target：触目的DOM节点目标。

实际的使用：
在这里插入图片描述