无需登录 数据私有 本地保存

指针事件实验田 - 鼠标/笔/触摸统一模型

交互 开发工具 Pointer Events 笔 触摸 鼠标
73
0
0
0
指针事件实验田
鼠标 触摸 笔
在此区域使用鼠标、触摸或笔进行操作
等待交互...
实时属性
指针类型--
Pointer ID--
isPrimary--
坐标 (X, Y)--
压力 Pressure--
倾斜 Tilt (X°, Y°)--
接触面积 (W×H)--
切向压力--
旋转 Twist°--
事件日志
0 条
暂无事件，开始在实验田操作吧
Pointer Events API 知识点
什么是 Pointer Events API？
Pointer Events API 是 W3C 标准，将鼠标、触摸、笔（触控笔）等多种输入方式统一为一个事件模型。开发者只需监听 pointerdown、pointermove、pointerup 等事件，即可同时处理所有指针输入，无需分别监听 mouse 和 touch 事件。
pointerType 有哪几种类型？
pointerType 属性返回三种值：mouse（鼠标）、touch（手指触摸）、pen（触控笔/手写笔）。通过该属性可以在统一的事件处理中区分输入设备类型，实现差异化交互。
pressure 压力值代表什么？
pressure 属性返回 0~1 之间的浮点数，表示指针设备对表面的压力。鼠标通常返回 0（按下时可能为 0.5），触摸和笔设备可返回实际压力值。Apple Pencil、Surface Pen、Wacom 等专业设备能提供精细的压力数据，常用于绘画应用中的笔触粗细控制。
tiltX / tiltY 倾斜角度如何使用？
tiltX 和 tiltY 分别表示笔设备在 X 轴和 Y 轴方向上的倾斜角度，范围通常为 -90° 到 90°。这可以模拟真实笔刷的倾斜效果，如铅笔侧锋涂鸦、喷枪角度等。鼠标和触摸通常返回 0。
touch-action 属性有什么作用？
touch-action CSS 属性控制浏览器对触摸事件的默认处理。设置为 none 可阻止浏览器的滚动、缩放等默认手势，确保所有指针事件都能被 JavaScript 捕获。在实验田等交互区域中，touch-action: none 是必需的。
Pointer Events 的浏览器兼容性如何？
Pointer Events API 已获得广泛支持：Chrome 55+、Firefox 59+、Safari 13+（macOS 和 iOS）、Edge 12+。移动端 Safari 自 iOS 13 起全面支持。对于极少数老旧浏览器，可使用 PEP polyfill 进行兼容。
什么是合并事件（Coalesced Events）？
高采样率设备（如 120Hz 触控笔）产生的指针事件可能被浏览器合并到单个 pointermove 中。使用 event.getCoalescedEvents() 可获取被合并的完整事件列表，实现更精细的轨迹记录，这对专业绘画应用非常重要。
🔧 相关工具