触屏Touch事件总结（touchstart、touchmove、touchend 区别和使用场景）

最新推荐文章于 2025-03-25 01:04:40 发布

yqdidy

最新推荐文章于 2025-03-25 01:04:40 发布

阅读量2.6k

点赞数 17

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/yqdid/article/details/144374639

版权

前言：web开发过程遇到触屏适配，需要使用到touch相关一系列事件，以下是开发过程查询的资料总结，以及遇到问题和解决方案

Touch 事件类型

touchstart
手指触摸时事件触发

addEventListener("touchstart", (event) => {});

ontouchstart = (event) => {};

touchmove
手指在屏幕上滑动式触发

addEventListener("touchmove", (event) => {});

ontouchmove = (event) => {};

touchend
手指离开屏幕时触发
touchcancel
系统取消touch事件的时候触发
注释：touchcancel 事件仅适用于带有触摸屏的设备。

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表:

TouchEvent事件

touches:当前位于屏幕下的手指列表信息
targetTouches: 当前位于当前元素下的手指列表信息
changedTouches: 当前涉及到当前事件的手指列表

通过一个例子来区分一下触摸事件中的这三个属性：

1、用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。

2、用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。

3、当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches
只有一个值。changedTouches此时只有一个值，为第二个手指的触摸点，因为第二个手指是引发事件的原因

4、用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值

5、手指滑动时，三个值都会发生变化

6、一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。

7、手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，此值为最后一个离开屏幕的手指的接触点。

Touch 对象属性

clientX: 触摸目标在视口中的X坐标,不包括任何滚动偏移。
clientY: 触摸目标在视口中的Y坐标,不包括任何滚动偏移。
screenX: 触点相对于屏幕左边缘的 X 坐标。
screenY: 触点相对于屏幕上边缘的 Y 坐标。
pageX: 触点相对于 HTML 文档左边沿的的 X 坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. 只读属性.
pageY: 触点相对于 HTML 文档上边沿的的 Y 坐标. 当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移. 只读属性.
identifier：表示触摸的唯一标识符
target: 返回触摸点最初接触的 Element，即使这个触摸点已经移出那个元素的交互区域。需要注意的是，如果这个元素在触摸过程中被移除，这个事件仍然会指向它，因此这个事件也不会冒泡到 window 或 document 对象。因此，如果有元素在触摸过程中可能被移除，最佳实践是将触摸事件的监听器绑定到这个元素本身，防止元素被移除后，无法再从它的上一级元素上侦测到从该元素冒泡的事件。

触点坐标选取

touchstart和touchmove使用:

e.targetTouches[0].pageX

touchend使用:

e.changedTouches[0].pageX

如何实时获取touchmove移动下的最新元素？

使用 elementFromPoint() + targetTouches

//注： e 为touchmove监听事件的event
const touch=e.targetTouches[0];
// const touch = e.touches[0];  //touches 也可以
const ele = document.elementFromPoint(touch.pageX, touch.pageY);

console.log(ele);

如何获取touchend移动下的最新元素 ？

使用 changedTouches + elementFromPoint()

const handleTouchEnd = (e: TouchEvent) => {
   const touch = e.changedTouches[0];
   const ele = document.elementFromPoint(touch?.pageX, touch?.pageY);
   console.log(ele);
}