触摸事件
- touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
- touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
- touchend事件:当手指从屏幕上离开的时候触发。
- touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
每个触摸事件都包括了三个触摸列表:
- touches:当前屏幕上所有触摸点的集合列表
- targetTouches: 绑定事件的那个结点上的触摸点的集合列表
- 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模拟器可以。