移动端事件核心知识梳理

移动端事件的发展

1、没有移动端事件，大部分 鼠标事件 在移动端一样有用

2、苹果推出 Touch 触摸事件

3、微软推出 Pointer 指针事件（统一鼠标、触摸、笔）

Touch 事件

事件类型

名称	描述
touchstart	当手指触摸屏幕时触发（触摸开始）
touchmove	当手指在屏幕上移动时连续地触发（触摸移动）
touchend	当手指从屏幕上抬起时触发（触摸结束）
touchcancel	手指还在屏幕上时，系统停止跟踪触摸时触发（触摸取消） 例如：手指正在屏幕上移动时，突然打进来一个电话 ，此时就会触发该事件

注意事项

名称	描述
注意事项	① Touch 事件在 PC 端不会触发，鼠标事件在 PC 端和移动端都会触发 ② 即使触摸点移出目标元素，touchmove 事件依然会持续触发, mousemove 事件不会再触发 ③ Touch 事件的特征检测（判断浏览器支不支持 Touch 事件）

Touch 事件的特征检测

名称	描述
Touch 事件的特征检测	判断浏览器是否支持 touch 事件，可以通过 in 关键字，判断该事件是否是 window 对象上的一个属性，返回结果为 true 则表示支持，反之则不支持。 以 ontouchstart 事件为例: if (Contouchstart' in window) { console.log(支持); }

Touch 事件的 event 对象

TIP

event 对象的常用属性

属性名	描述
event.type	事件类型
event.target	目标元素（绑定事件的源元素）
event.touches	屏幕上的所有触摸点
event.targetTouchs	起始于目标（绑定事件的源元素）上的所有触摸点
event.changedTouches	事件触发时，状态发生了改变的所有触摸点

触摸点的常用属性

以单指触摸点 const touch = event.changedTouches[0]; 为例

属性名	描述
indentifier	触摸点 id（唯一表示符），一般多指触摸有用
target	目标元素（绑定事件的源元素）
screenX / screenY	触点相对于屏幕左边缘的 X、Y 坐标
clientX / clientY	触点相对于可视区域边缘的 X、Y 坐标，不包括任何滚动偏移
pageX / pageY	触点相对于 HTML 文档左边缘的 X、Y 坐标，包括滚动偏移

阻止浏览器默认行为

阻止浏览器存在 scrolling 滚动，pinch/zoom 手指缩放、鼠标事件等默认行为

名称	描述
解决方式 一	可以在 touch 的事件处理函数中使用 event.preventDefault0 阻止浏览器的默认行为
解决方式二	touch-action 告诉浏览器哪些触摸操作让浏览器处理,阻止其他触摸操作的默认行为： ① touch-action: auto; 允许浏览器处理所有的触摸操作 ② touch-action: none; 禁止浏览器处理所有的默认触摸操作 ③ touch-action: pan-x; 只允许浏览器处理水平方向的触摸操作 ④ touch-action: pan-y; 只允许浏览器处理垂直方向的触摸操作 ⑤ touch-action: manipulation; 只允许进行滚动和持续缩放操作，不允许双击缩放

Pointer 事件

事件类型

指针：表示输入设备

例如：可触摸表面上的鼠标或接触点等

名称	描述
pointerover	指针进入目标元素区域时触发
pointerenter	指针进入目标元素边界时触发
pointerout	指针离开目标元素区域时触发
pointerleave	指针离开目标元素边界时触发
pointerdown	当指针激活时触发
pointermove	当指针移动时触发
pointerup	当指针不再处于计划状态时触发
pointercancel	如果浏览器断定指针将不再能够生成事件（例如：相关设备已停用）则会触发该事件

注意事项

名称	描述
注意事项	① Pointer 事件直接继承了鼠标事件，在此基础上又添加了其他一些内容，处理 Pointer 事件和处理鼠标事件几乎致 ② Pointer 事件在 PC 端和移动端都会触发 ③ 触摸点移出目标元素，touchmove 事件依然会持续触发，pointermove 和 mousemove 事件不会再触发

Pointer 事件的特征检测

名称	描述
Pointer 事件的特征检测	判断浏览器支不支持 Pointer 事件，可以通过 in 关键字，判断该事件是否是 window 对象上的一个属性 ，返回结果为 true 则表示支持，反之则不支持。 以 onpointerdown 事件为例： if ('onpointerdown' in window) { console.log('支持 Pointer 事件'); }

Pointer 事件的 event 对象

TIP

event 对象的常用属性

属性名	描述
pointerId	指针 id（唯一标识符）
target	目标元素
type	事件类型
pointerType	指针类型（鼠标/笔/触摸等）
screenX/screenY	指针相对于屏幕左边缘的 X、Y 坐标
clientX/clientY	指针相对于可视区域左边缘的 X、Y 坐标。不包括任何滚动傧移
x/y	clientX/clientY 的别名
pageX/pageY	指针相对于 HTML 文档左边缘的 X、Y 坐标。包括滚动傧移

TIP

阻止浏览器默认行为

名称	描述
方式一	① Pointer 的事件处理函数中，event.preventDefault() 阻止的是 PC 端的默认行为 ② 能够阻止图片拖动的默认行为 ③ 不能阻止浏览器存在 scrolling 滚动，pinch/zoom 手指缩放、鼠标事件等默认行为
方式二	可以在 touch 的事件处理函数中使用 event.preventDefault() 阻止移动端的默认行为
方式三	touch-action 设置触摸操作时浏览器的默认行为： ① touch-action: manipulation; 只允许进行滚动和持续缩放操作，不允许双击缩放 ② touch-action: pan-y; 只允许浏览器处理垂直方向的触摸操作 ③ touch-action: pan-x; 只允许浏览器处理水平方向的触摸操作 ④ touch-action: none; 禁止浏览器处理所有的默认触摸操作 ⑤ touch-action: auto; 允许浏览器处理所有的触摸操作