Pointer Events API 介绍

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 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组件通信
下一篇:记录一次有难度的后台重构&性能优化

相关推荐

  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀(https://github.com/SmallStoneSK/Blog/issues/6)尝到高价组件的甜头之后,现已深陷其中无法自拔。。。

    2 年前
  • 面试!你真的准备好了吗?|手写API系列梳理

    "不畏惧,不讲究,未来的日子好好努力"——大家好!我是小芝麻😄 标题党,它又、又、又来了...... (/public/upload/ce1d43cfb86634a10b9c8a07be33...

    1 个月前
  • 除了composition API,vue3.0文档又带来了什么新东西?

    (/public/upload/bceee5bf249edce49d803dcfff22199b) 异步组件 在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器...

    21 天前
  • 重构 - 设计API的扩展机制

    1.前言 上篇文章,主要介绍了重构的一些概念和一些简单的实例。这一次,详细的说下项目中的一个重构场景给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。

    2 年前
  • 重新开坑,在 react 中使用 composition API

    emmm大家好,那个,虽然最近新型肺炎,搞的人心惶惶,没啥动力写码 其实我也没啥可写的了,但是闲着也是闲着,然后记起来 smox 弃坑了还有一堆星星,想着怎么重新开坑 背景 smox 弃坑,不是我任性...

    7 个月前
  • 踩了pointer-events:none的坑

    bug出现: 一前端同事跟我说:你把这段加到全局的css里面 然后,悲剧了,上线后发现我的图片都不能点击了。 bug解决: 情急之下,在所有需要点击的img标签外边都包了一层div,把点击事件...

    2 年前
  • 足球特殊指数api接口示例

    分享下足球特殊指数数据,单双、总进球数、半全场赔率api接口示例,详情查看在线文档(https://www.shenlu88.com/doc.html) 接口返回的是Json数据,可以使用fastjs...

    8 个月前
  • 足球冠军指数 api接口示例

    分享下足球冠军指数API数据,接口示例如下,可查看在线文档(https://www.shenlu88.com/doc.... 接口返回的是Json数据,可以使用fastjson来解析 API...

    6 个月前
  • 超火js库: Lodash API例子 (持续更新~~~)

    lodash.js是一款超火的js库,在npm上平均周下载量达到了惊人的,github start大量框架都用到了lodash,包括拥有start的vue 本文对比英文文档,加上一些小栗子和个...

    2 年前
  • 谷歌地图API:带有多个标记的自动中心地图

    MultiformeIngegno(https://stackoverflow.com/users/1342772/multiformeingegno)提出了一个问题:Google Maps API ...

    2 年前

官方社区

扫码加入 JavaScript 社区