在前端开发中，我们经常会使用 touch 事件来处理移动设备上的触摸操作。其中，touchstart、touchmove、touchend 等事件对象都包含了一个 TouchEvent 对象，它们分别对应着当前的触控点集合。
在 TouchEvent 对象中，有三个重要的属性：touches、targetTouches 和 changedTouches。这三个属性分别是指当前所有的触控点集合、目标元素上的触控点集合和最近一次变化的触控点集合。它们在移动设备上的触摸操作中扮演着非常重要的角色，下面我们来详细了解它们的特点以及使用方法。
touches 属性
touches 属性是一个 TouchList 对象，表示当前所有触控点的集合。每个 Touch 对象代表着屏幕上的一个触控点，其中包含了该触控点的位置信息、唯一标识符等等。在一个 touchstart 或 touchmove 事件中，touches 属性总是会包含所有触控点的信息；而在 touchend 事件中，则会去掉已经离开屏幕的触控点。
以下是一个简单的示例代码，展示了如何获取当前所有触控点的数量：
document.addEventListener('touchstart', function(e) {
console.log('当前触控点数量：', e.touches.length);
});targetTouches 属性
targetTouches 属性是一个 TouchList 对象，表示触摸事件中位于目标元素上的触控点集合。这个属性通常用来判断是否有手指触摸了某个元素，并且可以用来做一些与之相关的交互。
以下是一个简单的示例代码，展示了如何判断当前触控点是否在某个元素内部：
-- -------------------- ---- -------
--- --- - -------------------------------
--------------------------------- ----------- -
-- ----------------------- - -- -
--- ----- - -------------------
-- ------------- --- ----- -
------------------------
-
-
---changedTouches 属性
changedTouches 属性是一个 TouchList 对象，表示最近一次触控点变化的集合。在 touchstart 和 touchend 事件中，它包含了唯一一个触控点的信息，而在 touchmove 事件中，则会包含多个触控点的信息。
以下是一个简单的示例代码，展示了如何获取最近一次移动的距离：
-- -------------------- ---- ------- --- ------- ------- --------------------------------------- ----------- - --- ----- - -------------------- ------ - ------------ ------ - ------------ --- -------------------------------------- ----------- - --- ----- - -------------------- --- ------ - ----------- - ------- --- ------ - ----------- - ------- -------------- -------- -------- -------------- -------- -------- ---
总结
在移动设备上的触摸操作中，touches、targetTouches 和 changedTouches 这三个属性扮演着非常重要的角色。它们分别表示当前所有触控点的集合、目标元素上的触控点集合和最近一次触控点变化的集合。通过合理地使用这些属性，我们可以实现更加丰富的交互效果，并且提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15265