# 移动端事件核心知识梳理

移动端事件的发展


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; 允许浏览器处理所有的触摸操作
上次更新时间: 9/29/2024, 9:19:56 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X