Pointer Events API 介绍

2,286 阅读2分钟

by @zhangbao(zhangbao) #0111

概览

我们可以简单地将 Pointer Events 理解成是 Mouse Event 和 Touch Event 的结合。

carbon (1).png

当前交互方式

现在主要有三种与输入设备交互的方式:手指、触控笔和鼠标。

image.png

使用触控笔和手指操作设备(触发 Touch 事件)

image.png

或者使用鼠标设备操作(触发 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.
}

参考链接


(正文完)


广告时间(长期有效)

我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个猫奴并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。

(完)