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, c:click
//结果说明：1:true  0:false 
1. TouchEvent.changedTouches[0].pageX
ios : s1 e1 m1 c0
android :s1 e1 m1 c0

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

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

四、总结

1. 手机上的点击事件，建议使用touchend 代替click解决点击延迟问题

2. 如果需要监听屏幕滑动方向、距离等，建议使用touchstart & touchend的 TouchEvent.changedTouches来获取点击位置