by @zhangbao(zhangbao) #0111
概览
我们可以简单地将 Pointer Events 理解成是 Mouse Event 和 Touch Event 的结合。
当前交互方式
现在主要有三种与输入设备交互的方式:手指、触控笔和鼠标。
使用触控笔和手指操作设备(触发 Touch 事件)
或者使用鼠标设备操作(触发 mouse**
事件,例如 mousedown
)
问题所在
假设现在我们需要完成一个网页,这个网页能适配桌面端和移动端。而且网页上有一个元素,要求既要能响应桌面端设备的鼠标点击,又能响应移动端手指的点击。
那么我们可能会写出如下的代码:
elem.addEventListener('mousedown', evt => {
// do some more cool stuff here
});
// 对触摸事件,做了是否由 Apple 触控笔触发的判断。
elem.addEventListener('touchstart', evt => {
// do some more cool stuff here
switch (evt.touches[0].touchType) {
// Apple 触控笔触发
case 'stylus':
break;
// 手指触发
case 'direct'
break;
default:
// ...
}
});
大家看,为了同时支持桌面端和移动端。我们为同一个元素绑定了两次事件。
那如果用 Pointer Events API 改写呢?
Pointer Events API 的写法
elem.addEventListener('pointerdown', (e) => {
switch (e.pointerType) {
case 'mouse': {
console.log('Pointer type detected: mouse');
break;
}
case 'pen': {
console.log('Pointer type detected: pen');
break;
}
case 'touch': {
console.log('Pointer type detected: touch');
break;
}
default: {
console.log('PointerType is unknown or could not be detected');
}
}
});
看到没,一次绑定、适用全部!我们使用事件对象的 .pointerType
属性区分是由何类输入设备触发的。这就是使用 Pointer Events API 的优势所在。
我们可以把 mouse、pen、touch 这三者都简单抽象成一个点(Pointer)。Pointer Events API 为这三者创建了统一的事件模型,由它们触发的事件,统称为“指针事件(Pointer Event)”。
因此,我们可以简单地将 Pointer Events 理解成是 Mouse Event 和 Touch Event 的结合。以前需要注册两次的事件监听器,现在减少到只要一次。
继承自 MouseEvent
Pointer Event 继承自 MouseEvent。因此,与鼠标事件的命名颇为相似。这样做的目的,是为了更好从鼠标事件往指针事件上过渡,同时还能对 Touch 事件提供支持(指针对象中也包含了一些与触摸事件相关的数据,比如压力、方向偏移之类的信息)。
Pointer Event | Mouse Event |
---|---|
pointerover |
mouseover |
pointerover |
mouseover |
pointerenter |
mouseenter |
pointerdown |
mousedown |
pointermove |
mousemove |
pointerup |
mouseup |
pointercancel |
无对应事件 |
pointerout |
mouseout |
pointerleave |
mouseleave |
gotpointercapture |
无对应事件 |
lostpointercapture |
无对应事件 |
检查是否支持
我们可以使用下面的代码,检查当期浏览器是否支持 Pointer Event API:
if (window.PointerEvent) {
// Hello Pointer Events
} else {
// Oh... Hi fallback... it's you.
}
参考链接
(正文完)
广告时间(长期有效)
我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个猫奴并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。
(完)