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);

}

touchstart 可以获取触摸开始的元素及坐标：e.target就是触摸开始的元素