指针事件pointerEvent

1、定义

指针事件 - Pointer events 是一类可以为定点设备所触发的DOM事件。它们被用来创建一个可以有效掌握各类输入设备（鼠标、触控笔和单点或多点的手指触摸）的统一的DOM事件模型。所谓 指针 是指一个可以明确指向屏幕上某一组坐标的硬件设备。建立这样一个单独的事件模型可以有效的简化Web站点与应用所需的工作，同时也便于提供更加一致与良好的用户体验，无需关心不同用户和场景在输入硬件上的差异。而且，对于某些特定设备才可处理的交互情景，指针事件也定义了一个 pointerType 属性以使开发者可以知晓该事件的触发设备，以有针对性的加以处理。

也就是说本来web端我们会使用mousedown、mouseover、mouseup等来监听鼠标时间、移动端我们会用touchstart、touchmove、touchend监听触摸时间，但是使用了指针事件Pointer events 就不用这样区分了，它会自动兼容web端还是移动端的事件，也会返回pointerType属性表明触发设备。

2、PointerEvent 接口

PointerEvent 接口扩展了 MouseEvent 接口，并含有以下属性（这些属性的可写属性全部为只读）。

• pointerId - 对于某个由指针引起的事件的唯一标识。
• width - 以CSS像素计数的宽度属性，取决于指针的接触面的几何构成。
• height -  以CSS像素计数的高度属性，取决于指针的接触面的几何构成。
• pressure - 规范化后的指针输入的压力值，取值范围为0到1，0代表硬件可检测到的压力最小值，1代表最大值。
• tiltX - the plane angle (in degrees, in the range of -90 to 90) between the Y-Z plane and the plane containing both the transducer (e.g. pen stylus) axis and the Y axis.
• tiltY - the plane angle (in degrees, in the range of -90 to 90) between the X-Z plane and the plane containing both the transducer (e.g. pen stylus) axis and the X axis.
• pointerType - 表明引发该事件的设备类型（鼠标/笔/触摸等）。
• isPrimary - 表示该指针是否为该类型指针中的首选指针。

3、事件类型与全局事件处理

指针事件有始终不同的事件类型，其中其中在鼠标事件中有相对应的语义话表示 (down, up, move, over, out, enter, leave)。以下是每个事件类型及所对应的Global Event Handler的基本介绍。

Event	On Event Handler	Description
pointerover	onpointerover	当定点设备进入某个元素的命中检测 范围时触发。
pointerenter	onpointerenter	当定点设备进入某个元素或其子元素的命中检测范围时，或做为某一类不支悬停（hover）状态的设备所触发的poinerdown事件的后续事件时所触发。(详情可见 pointerdown事件类型).
pointerdown	onpointerdown	当某指针得以激活时触发。
pointermove	onpointermove	当某指针改变其坐标时触发。
pointerup	onpointerup	当某指针不再活跃时触发。
pointercancel	onpointercancel	当浏览器认为某指针不会再生成新的后续事件时触发（例如某设备不再活跃）
pointerout	onpointerout	可能由若干原因触发该事件，包括：定位设备移出了某命中检测的边界；不支持悬浮状态的设备发生pointerup事件（见pointerup事件）； 作为 pointercancel event事件的后续事件（见pointercancel事件）；当数位板检测到数位笔离开了悬浮区域时。
pointerleave	onpointerleave	当定点设备移出某元素的命中检测边界时触发。对于笔形设备来说，当数位板检测到笔移出了悬浮范围时触发。
gotpointercapture	ongotpointercapture	当某元素接受到一个指针捕捉时触发。
lostpointercapture	onlostpointercapture	当针对某个指针的指针捕捉得到释放时触发。

4、确定按钮状态

对于某些指针设备来说，比如鼠标或者压感笔，设备上可能有一个或多个按钮可以同时或依次序按动。比如在某个按钮释放后立刻按下其他按钮。为了确定这些按钮的按压状态，指针事件使用button与 buttons等MouseEvent接口中的事件 （PointerEvent继承于此）表明相应的状态。下表提供了各类设备的按钮状态与button和buttons属性的属性值对应关系。

通过这个属性就可以明确判断触发的是哪个键，跟event.which类似判断左右键的功能，用于特殊场景。

设备按钮状态	button	buttons
鼠标移动且无按钮被按压	-1	0
鼠标左键、触摸接触、压感笔接触（无额外按钮被按压）	0	1
鼠标中键	1	4
鼠标右键、压感笔接触且笔杆按钮被按压	2	2
鼠标X1 (back)	3	8
鼠标X2 (forward)	4	16
压感笔接触且橡皮擦按钮被按压	5	32

 

指针事件pointerEvent的mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events