移动端触摸（touch）事件

Touch 事件

首先 touch 包含三类事件，它们分别是：touchstart、touchmove、touchend 。望文生义这种本能相信你应该会有，但在这里我还是有必需对这三个词进行一翻不必要的解释。

touchstart：手指触摸到一个 DOM 元素时触发。

 

touchmove：手指在一个 DOM 元素上滑动时触发。

 

touchend：手指从一个 DOM 元素上移开时触发。

这三个事件又分别对应三个相同的触摸列表：

touches：正在触摸屏幕的所有手指的一个列表。

 

targetTouches：正在触摸当前 DOM 元素上的手指的一个列表。

 

changedTouches：涉及当前事件的手指的一个列表。

 

 

ev事件返回的结果ev.touches[0]

 

1. Touch {identifier: 0, target: div#div2.box.right, screenX: 393, screenY: 273, clientX: 336, …}
   1. clientX: 336
   2. clientY: 86
   3. force: 1
   4. identifier: 0
   5. pageX: 336
   6. pageY: 86
   7. radiusX: 11.5
   8. radiusY: 11.5
   9. rotationAngle: 0
   10. screenX: 393
   11. screenY: 273
   12. target: div#div2.box.right
   13. __proto__: Touch

 

提示:

上面就是一个 TouchList 列表。它对应的就是前面提到的三种事件（touchstart、touchmove、touchend）中的一种，在触发时生成的一个对象列表。列表里最有用的就是 Touch 对象了，Touch 对象里存放着对应事件的一些相关的信息，我们就是通过这种个事件里这些属性的有机结合来实现各种效果。

通过上面的 radiusX，radiusY，rotationAngle 这三个属性就可以计算出你的手指触摸手机屏幕时的一个接触面，只不过这个接触面是用一个近似的椭圆来表示，也就是说它不是一个真正意义上的接触面，而是一个大概的接触面。相信心细的朋友应该会看到 TouchList 对象里有一个 length 属性，并且它的值为 1  ，这说明当前只有一个手指触发了事件（比如：touchstart 事件），换句话说，此时你只有一个手指放到了手机屏幕上，这个手指对应的一些信息存放在 Touch 对象里。因为只有一个手指放在了屏幕上，所以这个 TouchList 里只有一个 Touch 对象，并且是第一个下标为 0 。TouchList 列表里还有一个 target 属性，这个应该很好理解，就是触摸的目标。

为了让你能更加立体地理解上面的这些属性，我专门从网上找了一段话来作为补充：

1.Touch.identifier：此 Touch 对象的唯一标识符。 一次触摸动作(我们指的是手指的触摸)在平面上移动的整个过程中，该标识符不变。 可以根据它来判断跟踪的是否是同一次触摸过程，此值为只读属性。

 

2.Touch.screenX：触点相对于屏幕左边沿的X坐标。只读属性。

 

3.Touch.screenY：触点相对于屏幕上边沿的Y坐标。只读属性。

 

4.Touch.clientX：触点相对于可见视区(visual viewport)左边沿的X坐标。不包括任何滚动偏移。只读属性。

 

5.Touch.clientY：触点相对于可见视区(visual viewport)上边沿的Y坐标。不包括任何滚动偏移。只读属性。

 

6.Touch.pageX：触点相对于HTML文档左边沿的X坐标。当存在水平滚动的偏移时，这个值包含了水平滚动的偏移。只读属性。

 

7.Touch.pageY：触点相对于HTML文档上边沿的Y坐标。当存在水平滚动的偏移时，这个值包含了垂直滚动的偏移。只读属性。

 

8.Touch.radiusX：能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径。这个值的单位和 screenX 相同。只读属性。

 

9.Touch.radiusY：能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径。这个值的单位和 screenY 相同。只读属性。

 

10.Touch.rotationAngle：它是这样一个角度值：由radiusX 和 radiusY描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面。只读属性。

 

11.Touch.force：手指挤压触摸平面的压力大小，从0.0(没有压力)到1.0(最大压力)的浮点数。只读属性。

 

12.Touch.target：当这个触点最开始被跟踪时(在 touchstart 事件中)，触点位于的HTML元素。哪怕在触点移动过程中，触点的位置已经离开了这个元素的有效交互区域，或者这个元素已经被从文档中移除。需要注意的是，如果这个元素在触摸过程中被移除，这个事件仍然会指向它，但是不会再冒泡这个事件到 window 或 document 对象。因此，如果有元素在触摸过程中可能被移除，最佳实践是将触摸事件的监听器绑定到这个元素本身，防止元素被移除后，无法再从它的上一级元素上侦测到从该元素冒泡的事件。只读属性。