[JS 基础] touchEvent中的changedTouches，targetTouches和touches的区别

Posted 2020-08-21

    对于移动端开发中 touchEvent(触摸事件) 中changedTouches，targetTouches和touches的区别往往不容易弄清，故特意查询了

MDN相关资料

1. 其中，对 changedTouches 的解释是

A TouchList whose touch points (Touch objects) varies depending on the event type, as follows:

• For the touchstart event, it is a list of the touch points that became active with the current event.
• For the touchmove event, it is a list of the touch points that have changed since the last event.
• For the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface).

一个触点对象的列表，取决于事件的类型:

• 对于 touchstart 事件，它是一个触发当前事件的触点的列表；
• 对于 touchmove 事件，它是一个从最后一次事件对比，改变的触点的列表；
• 对于 touchend 事件，它是已经从触摸表面移除的触点的列表(即，这些触点对应的手指不再与触摸表面接触)

2. 对 targetTouches 的解释是

A TouchList listing all the Touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same target element as the current target element.

一个触发touchstart事件时触点所在元素上的所有没有离开触摸表面的触点的集合

3.对 touches 的解释是

A TouchList listing all the Touch objects for touch points that are currently in contact with the touch surface, regardless of whether or not they‘ve changed or what their target element was at touchstart time.

一个不管是否改变或者目标元素是touchstart事件对应的元素的所有没有离开触摸表面触点的列表。

ps：以上中文翻译均为自己理解。

 

因能力有限，文章中有问题的地方，还请各路高手及时指正。