一, 移动端事件问题
1.click 事件 300ms 延迟问题
2007 年第一代 iPhone 发布, 移动端 Safari 首创双击缩放功能, 原理是 click 一次后, 经过 300ms 之后检测是否再有一次 click, 如果有就会缩放, 如果没有则是一个 click 事件. 所以 cilck 操作会有卡顿感觉.
2.dblclick 事件失效
由于双击缩放的存在, 移动端的 dblclick 事件也失效了.
二, 移动端触摸事件
touchstart 在屏幕上按下手指时触发
touchmove 在屏幕上移动手指时触发
touchend 在屏幕上抬起手指时触发
touchcancel 触点由于某些原因被中断时触发. 例如触摸时电话接入或者弹出框, 都会中断触摸. 一般会在这时暂停游戏, 存档等操作.
三, TouchEvent 事件对象
TouchEvent 继承了 UIEvent 和 Event, 事件对象中包含很多内容, 这里挑一些常用的:
touches 位于当前屏幕上所有触摸点列表(TouchList 对象, 包含若干个 Touch 对象)
targetTouches 起始于当前 DOM 元素, 且没有结束的触摸点列表, 是 touches 的一个严格子集(TouchList 对象)
changedTouches 当前事件发生变化的触摸点列表(TouchList 对象). 对于 touchstart, 新增加的触点; 对于 touchmove, 和上一次事件比较发生变化的触点(任何一个属性); 对于 touchend, 离开屏幕的触点.
target 触发事件的 DOM 节点
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 标准的内置事件, 因为移动端的单双击事件问题和更丰富的用户需求, 仅仅依赖原生事件来开发是不够方便的, 因此出现了一些自定义事件的库. 比如 jQuery Mobile 库和 zeptojs 库中的 tap 类事件 (用于代替 click 事件) 和 swipe 类事件(定义滑动的事件). 我们还可以使用原生事件来自定义更高级的手势, 例如双指放大缩小等.
来源: https://www.cnblogs.com/V587Chinese/p/10202080.html