Pointer Events API 介绍

2020-01-12

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 EventMouse Event
pointerovermouseover
pointerovermouseover
pointerentermouseenter
pointerdownmousedown
pointermovemousemove
pointerupmouseup
pointercancel无对应事件
pointeroutmouseout
pointerleavemouseleave
gotpointercapture无对应事件
lostpointercapture无对应事件

检查是否支持

我们可以使用下面的代码,检查当期浏览器是否支持 Pointer Event API:

if (window.PointerEvent) {
  // Hello Pointer Events
} else {
  // Oh... Hi fallback... it's you.
}

参考链接


(正文完)


广告时间(长期有效)

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


原文链接:juejin.im

上一篇:基础知识梳理 ~ react组件通信
下一篇:记录一次有难度的后台重构&性能优化
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部