touchEvent
1 TouchEvent 对象
touch事件可以得到 TouchEvent 对象
TouEvent对象具有如下属性：
| 属性 | 含义 |
|---|---|
| changedTouches | 一个 TouchList 对象，包含了所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。在元素上改变状态的手指个数 |
| targetTouches | 一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标元素上，并且仍然没有离开触摸平面的触点。 触发事件时在元素上的手指个数 |
| Touches | 一 个 TouchList 对象，包含了所有当前触摸平面的触点的 Touch 对象，无论它们的起始于哪个元素 上，也无论它们状态是否发生了变化。触发事件时在屏幕上的手指个数 |
| cancelable | 布尔值，是否可以阻止默认的行为；值若是为 false, 调用 event.preventDefault() 会报错 |
一般情况下
touchstart 和 touchemove 事件使用 targetTouches
touchend 事件使用 changeTouches
2 TouchList 对象
一个 TouchList 代表一个触摸平面上所有触点的列表; 举例来讲, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的TouchList 对于每根手指都会生成一个 Touch 对象, 共计三个。
3 Touch 对象
Touch对象的属性如下：
| 属性 | 含义 |
|---|---|
| identifier | 此 Touch 对象的唯一标识符. 一次触摸动作(我们指的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程. 只读属性. |
| screenX | 触点相对于屏幕左边沿的的X坐标. 只读属性. |
| screenY | 触点相对于屏幕上边沿的的Y坐标. 只读属性. |
| clientX | 触点相对于可见视口(visual viewport) 左边沿的的X坐标. 不包括任何滚动偏移. 只读属性. |
| clientY | 触点相对于可见视口(visual viewport) 上边沿的的X坐标. 不包括任何滚动偏移. 只读属性. |
| 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 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性. |