一、问题背景
- click事件在移动端的300毫秒延迟问题
- 当需要监听诸如左滑、右滑之类的事件
二、知识点概括
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
//结果说明：1:true 0:false
1. TouchEvent.changedTouches[0].pageX
ios : s1 e1 m1
android :s1 e1 m1
2. TouchEvent.touches[0].pageX
ios: s1 e0 m1
android :s1 e0 m1
3. TouchEvent.targetTouches[0].pageX
ios:s1 e0 m1
android :s1 e0 m1
四、总结
- 手机上可用touchstart 代替click
- 检测点击位置等信息读TouchEvent.changedTouches
网友评论