JS—触摸事件

触摸事件

1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
3. touchend事件：当手指从屏幕上离开的时候触发。
4. touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。
   
   

每个触摸事件都包括了三个触摸列表：

1. touches:当前屏幕上所有触摸点的集合列表
2. targetTouches: 绑定事件的那个结点上的触摸点的集合列表
3. changedTouches: 触发事件时改变的触摸点的集合

举例来说，比如div1, div2只有div2绑定了touchstart事件，第一次放下一个手指在div2上，触发了touchstart事件，这个时候，三个集合的内容是一样的，都包含这个手指的touch，然后，再放下两个手指一个在div1上，一个在div2上，这个时候又会触发事件，但changedTouches里面只包含第二个第三个手指的信息，因为第一个没有发生变化，而targetTouches包含的是在第一个手指和第三个在div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三个手指。

每个Touch对象包含的属性如下：

{
    screenX: 511, 
    screenY: 400,//触点相对于屏幕左边沿的Y坐标
    clientX: 244.37899780273438, //触摸目标在视口中的x坐标。
    clientY: 189.3820037841797,//相对于可视区域
    pageX: 244.37, 
    pageY: 189.37,//相对于HTML文档顶部，当页面有滚动的时候与clientX=Y 不等
    force: 1,//压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数
    identifier: 1036403715,//一次触摸动作的唯一标识符
    radiusX: 37.565673828125, //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
    radiusY: 37.565673828125,
    rotationAngle: 0,//它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面
    target: {} // 此次触摸事件的目标element
}

identifier
使用 Chrome 的模拟器发现多次触摸动作，值始终不变。用真机测试则不会有问题(用的safari连接mac调试可以)。每次触摸包括start,move,end这整个过程，标志符都不变。下一次触摸动作开始，标志符就会变化。

screenY clientY
在 safari 中 screenY与clientY值是相等的，在iOS微信中两个数值不等，但单位应该也不一样。

radiusX radiusY rotationAngle
测试过程中safari及微信内置浏览器都不支持这些属性，chrome模拟器可以。

参考资料

• 移动端 Touch 事件的使用与思考（1）
• HTML5触摸事件(touchstart、touchmove和touchend)