移动端前端常见的触摸事件（touch类事件）

touch类事件

触摸事件，有touchstart touchmove touchend touchcancel 四种之分

touchstart：手指触摸到屏幕会触发

touchmove：当手指在屏幕上移动时，会触发

touchend：当手指离开屏幕时，会触发

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

 

由于手机端的手指触发不是单个的，所以在event里面生成的与触摸有关的数据都是以数组的形式列出来的，有以下三个：

touches：表示当前跟踪的触摸操作的touch对象的数组。当前屏幕上所有触摸点的集合列表

targetTouches：特定于事件目标的Touch对象的数组。绑定事件的那个结点上的触摸点的集合列表

changedTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。触发事件时改变的触摸点的集合

 

TouchEvent继承了UIEvent和Event，事件对象中包含很多内容，下面是常用的：

touches          位于当前屏幕上所有触摸点列表(TouchList对象,包含若干个Touch对象)
targetTouches    起始于当前DOM元素，且没有结束的触摸点列表，是touches的一个严格子集(TouchList对象)
changedTouches   当前事件发生变化的触摸点列表(TouchList对象).对于touchstart,新增加的触点;对于touchmove,和上一次事件比较发生变化的触点(任何一个属性);对于touchend,离开屏幕的触点。
currentTarget    捕获层的DOM节点（即绑定事件的元素）
target      触发事件的DOM节点（实际触发的元素,target通常是位于currentTarget的子节点或其本身）
srcElement  与target本质相同，在早期的firfox中没有srcElement,IE中没有target
timeStamp   返回一个时间戳，从 epoch 开始的毫秒数。epoch 是一个事件参考点，在这里，它是客户机启动的时间。
type        当前事件的类型，如"touchstart"
altKey      布尔值，指明触摸事件触发时，键盘 alt 键是否被按下。
ctrlKey     布尔值，指明触摸事件触发时，键盘 ctrl 键是否被按下。

每个触摸点（Touch对象）包含了如下属性：

screenX / screenY  触摸点在屏幕中的位置
pageX / pageY      触摸点在整个文档中的位置
clientX / clientY  触摸点在可视区域中的位置
identifier         每个触摸点的唯一标识符
target             该触摸点最开始触摸的dom元素,即触发它的元素，无论触点移动到了哪里，该值都不会改变。
radiusX / radiusY  触摸点大概是一个椭圆，分别为水平轴半径/垂直轴半径(支持不好)
rotationAngle      触摸点旋转角度(顺时针)
force              压力大小，从0.0(没有压力)到1.0(最大压力)的浮点数

以上的touch事件是HTML标准的内置事件，因为移动端的单双击事件问题和更丰富的用户需求，仅仅依赖原生事件来开发是不够方便的，因此出现了一些自定义事件的库。