以前，指向网页上的对象很简单。您有鼠标，您移动鼠标，有时按按钮，就这样。所有非鼠标设备都被模拟为鼠标，开发者可以完全放心。
不过，简单并不一定意味着好。随着时间的推移，我们越来越重视多样性：您可以使用具有压感和倾斜感知功能的触控笔，获得极大的创作自由；您也可以使用手指，只需设备和手即可；而且，何不同时使用多根手指？
我们已经推出了触摸事件来帮助我们解决此问题，但它们是专门用于触摸的完全独立 API，因此如果您想同时支持鼠标和触摸，就必须编写两个单独的事件模型。Chrome 55 附带了一种新标准，可统一这两种模型：指针事件。
单事件模型
指针事件统一了浏览器的指针输入模型，将触摸、触控笔和鼠标整合到一组事件中。例如：
document.addEventListener('pointermove',
ev => console.log('The pointer moved.'));
foo.addEventListener('pointerover',
ev => console.log('The pointer is now over foo.'));
以下是所有可用事件的列表，如果您熟悉鼠标事件，应该会觉得这些事件非常熟悉：
pointerover
|
指针已进入元素的边界框。
对于支持悬停的设备，此操作会立即发生；对于不支持悬停的设备，此操作会在 pointerdown 事件之前发生。
|
pointerenter
|
与 pointerover 类似，但不会向上传播，并且会以不同的方式处理子项。
规范详情。
|
pointerdown
|
指针已进入活动按钮状态，即按下按钮或建立接触，具体取决于输入设备的语义。 |
pointermove
|
指针已更改位置。 |
pointerup
|
指针已离开活动按钮状态。 |
pointercancel
|
发生了某种情况，指针不太可能再发出任何事件。这意味着，您应取消所有正在进行的操作，并返回中性输入状态。 |
pointerout
|
指针已离开元素或屏幕的边界框。此外，如果设备不支持悬停，则在 pointerup 后面也需要添加此属性。
|
pointerleave
|
与 pointerout 类似，但不会向上传播，并且会以不同的方式处理子项。
规范详情。
|
gotpointercapture
|
元素已收到指针捕获。 |
lostpointercapture
|
正在捕获的指针已释放。 |
不同的输入类型
通常，借助指针事件，您可以以与输入无关的方式编写代码，而无需为不同的输入设备注册单独的事件处理脚本。当然，您仍然需要注意输入类型之间的差异，例如悬停概念是否适用。不过，如果您确实想区分不同的输入设备类型（例如，为不同的输入提供单独的代码/功能），则可以使用 PointerEvent 接口的 pointerType 属性在同一事件处理脚本中执行此操作。例如，如果您要编写侧边抽屉导航栏，则可以为 pointermove 事件使用以下逻辑：
switch(ev.pointerType) {
case 'mouse':
// Do nothing.
break;
case 'touch':
// Allow drag gesture.
break;
case 'pen':
// Also allow drag gesture.
break;
default:
// Getting an empty string means the browser doesn't know
// what device type it is. Let's assume mouse and do nothing.
break;
}
默认操作
在支持触控的浏览器中，可以使用某些手势滚动、缩放或刷新页面。
对于触摸事件，您仍会在这些默认操作执行期间收到事件，例如，在用户滚动时，系统仍会触发 touchmove。
使用指针事件时，每当触发滚动或缩放等默认操作时，您都会收到 pointercancel 事件，以便您知道浏览器已控制指针。例如：
document.addEventListener('pointercancel',
ev => console.log('Go home, the browser is in charge now.'));
内置速度：与触摸事件相比，此模型默认可提供更好的性能，因为您需要使用被动事件监听器才能实现相同的响应速度。
您可以使用 touch-action CSS 属性阻止浏览器接管。将元素上的此属性设置为 none 会停用通过该元素启动的所有浏览器定义的操作。不过，还有一些其他值可用于实现更精细的控制，例如 pan-x，可让浏览器对 x 轴上的移动做出响应，但对 y 轴上的移动不响应。Chrome 55 支持以下值：
auto
|
默认；浏览器可以执行任何默认操作。 |
none
|
浏览器不得执行任何默认操作。 |
pan-x
|
浏览器只能执行水平滚动默认操作。 |
pan-y
|
浏览器只能执行垂直滚动默认操作。 |
pan-left
|
浏览器只能执行水平滚动默认操作，并且只能将页面平移到左侧。 |
pan-right
|
浏览器只能执行水平滚动默认操作，并且只能将页面平移到右侧。 |
pan-up
|
浏览器只能执行垂直滚动默认操作，并且只能向上平移页面。 |
pan-down
|
浏览器只能执行垂直滚动默认操作，并且只能向下平移页面。 |
manipulation
|
浏览器只能执行滚动和缩放操作。 |
指针捕获
您是否曾花费数小时来调试损坏的 mouseup 事件，直到发现问题出在用户在点击目标之外放开按钮上？没有？好的，可能只是我的问题。
不过，到目前为止，还没有很好的方法来解决这个问题。当然，您可以在文档中设置 mouseup 处理脚本，并在应用中保存一些状态以跟踪各项内容。不过，这并不是最干净的解决方案，尤其是在您构建Web 组件并尝试将所有内容保持良好隔离的情况下。
指针事件提供了一个更好的解决方案：您可以捕获指针，以确保收到 pointerup 事件（或任何其他难以捉摸的事件）。
const foo = document.querySelector('#foo');
foo.addEventListener('pointerdown', ev => {
console.log('Button down, capturing!');
// Every pointer has an ID, which you can read from the event.
foo.setPointerCapture(ev.pointerId);
});
foo.addEventListener('pointerup',
ev => console.log('Button up. Every time!'));
浏览器支持
在撰写本文时，Internet Explorer 11、Microsoft Edge、Chrome 和 Opera 支持指针事件，Firefox 部分支持指针事件。您可以访问 caniuse.com 查看最新列表。
您可以使用指针事件 polyfill 来填补空白。或者，您也可以直接在运行时检查浏览器支持情况：
if (window.PointerEvent) {
// Yay, we can use pointer events!
} else {
// Back to mouse and touch events, I guess.
}
指针事件非常适合渐进式增强：只需修改初始化方法以执行上述检查，在 if 块中添加指针事件处理脚本，并将鼠标/触摸事件处理脚本移至 else 块即可。
欢迎试用，并与我们分享您的感受和想法！