Touch事件总结

Touch对象--MDN
TouchEvent--MDN

一、问题背景

1. click事件在移动端的300毫秒延迟问题
2. 当需要监听诸如左滑、右滑之类的事件

二、知识点概括

1. 事件类型

• touchstart: //手指放到屏幕上时触发
• touchmove: //手指在屏幕上滑动式触发
• touchend: //手指离开屏幕时触发
• touchcancel: //系统取消touch事件的时候触发

2. TouchEvent事件（均只读）

• targetTouches
  ：一个 TouchList
  对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element
  上，并且仍然没有离开触摸平面的触点。

• **touches
  **：一个 TouchList
  对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。

• changedTouches
  ：一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。

• ctrlKey： 只读布尔值，指明触摸事件触发时，键盘 ctrl 键是否被按下。

• metaKey ：只读布尔值，指明触摸事件触发时，键盘 meta 键 （Wikipedia - meta Key）是否被按下。

• shiftKey ：只读布尔值，指明触摸事件触发时，键盘 shift 键是否被按下。

• altKey ：只读布尔，指明触摸事件触发时，键盘 alt 键是否被按下。

3. Touch对象（均只读）

• identifier
  
  此 Touch 对象的唯一标识符. 一次触摸动作(我们值的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程.
• screenX
  触点相对于屏幕左边沿的的X坐标.
• screenY
  触点相对于屏幕上边沿的的Y坐标.
• clientX
  触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移.
• clientY
  触点相对于可见视区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移.
• pageX
  触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移.
• pageY
  触点相对于HTML文档上边沿的的Y坐标. 当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移.
• radiusX
  能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和screenX 相同.
• radiusY
  能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和screenY 相同.
• rotationAngle
  它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面.
• force
  手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数.
• target
  当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件.

三、 测试情况

//事件说明：s:touchstart , e:touchend , m:touchmove
//结果说明：1:true  0:false 
1. TouchEvent.changedTouches[0].pageX
ios : s1 e1 m1 
android :s1 e1 m1 

2. TouchEvent.touches[0].pageX
ios: s1 e0 m1 
android :s1 e0 m1 

3. TouchEvent.targetTouches[0].pageX
ios:s1 e0 m1 
android :s1 e0 m1 

四、总结

1. 手机上可用touchstart 代替click
2. 检测点击位置等信息读TouchEvent.changedTouches