WebAPI之指针事件

指针事件

以前web端的指针设备为鼠标，现在新兴设备越来越多，触摸屏、手写笔等。再使用鼠标事件已经不满足这些设备事件模型。

指针事件-Pointer Events 是一类可以为指针设备所触发的DOM事件。它是一个统一的DOM事件模型。这些事件需要处理通用指针输入。

指针-指一个可以明确指向屏幕上某一组坐标的硬件设备。

PointerEvent接口继承了MouseEvent中的所有属性和方法。

事件类型

需要注意，多数情况下指针事件与鼠标事件都会发送了。如果使用指针事件应该使用过event.preventDefault()来避免发送鼠标事件。

• pointerover 当指针移动到元素的命中测试边间时触发的事件。
• pointerenter 当指针移动到元素或其后代的命中检测边界时触发。不冒泡
• pointerdown 当指针处于活跃状态时触发。对于鼠标就是从没有按钮到有一个按钮点击时触发。
• pointermove 指针改变坐标时触发。
• pointerup 指针不再活跃时触发
• pointercancel  浏览器认为指针不能够再发生事件，会触发此事件。测试时 div滚动到边界触发了此事件
• pointerout 指针移出元素命中检测边界。不支持悬停的指针设备发生事件。pointercancel事件发生后。触控笔离开悬停范围
• pointerleave 指针移出元素命中检测边界
• gotpointercapture 当元素收到指针捕获会触发此事件。
• lostpointercapture 释放指针捕获时触发此事件

PointerEvent接口

PointerEvent接口代表了由指针引发的DOM事件的状态。

属性

• pointerId RO number 触发事件的pointer的唯一标识符。是惟一的，不同于其他所有获取的指针事件的标识符。该值是随机生成的，没有任何特定意义。
• width RO number 指针在x轴的接触几何图形的宽度。比如我们用手指肚触摸屏幕会形成一个触摸面，这个触摸面的宽度 CSS像素宽度
• height RO number 指针在x轴的接触几何图形的高度。比如我们用手指肚触摸屏幕会形成一个触摸面，这个触摸面的高度 CSS像素高度
• pressure RO float 压力范围 0 到1  不支持压力的设备 活跃状态 是0.5  否则是0
• tangentialPressure RO float [-1,1]
• tiltX RO  由输入设备与Y轴构成的平面和Y-Z平面之间的夹角 [-90,90]
• tiltY RO  由输入设备与X轴构成的平面和X-Z平面之间的夹角 [-90,90]
• twist RO 输入设备围绕自身主轴顺势针旋转的角度。[0,359]
• pointerType RO 表示触发事件的设备类型，测试时有touch、mouse 没有触控笔
• isPrimary RO 标识一个指针是否是当前设备类型的主指针pointer。true。在多点触控的触摸屏上很有用，因为只有主指针才能兼容鼠标事件，而且如果只希望进行单指针操作时可以将其他的过滤掉。