PointerEvents API 是 HTML5 统一处理鼠标、触摸、压感笔等多输入设备的核心方案，通过 pointerdown/move/up/cancel 事件及 pointerType、pressure、tiltX/Y 等属性实现精准识别与响应。
HTML5 中的 PointerEvents API 是解决鼠标、触摸屏、压感笔（如 Surface Pen、Apple Pencil）等多输入设备统一处理的核心方案。它用一套事件模型替代了过去分散的 mouse、touch、MSPointer，让开发者无需判断设备类型就能响应各类指针操作。
启用 PointerEvents 并检测兼容性
现代浏览器（Chrome 55+、Firefox 59+、Safari 13.1+、Edge 全版本）默认支持 PointerEvents。可通过以下方式确认支持并降级兜底：
- 用
'onpointerdown' in window或window.PointerEvent判断原生支持 - 不支持时，可监听
mousedown/touchstart并手动模拟 pointer 事件逻辑（不推荐长期维护） - 注意 Safari 早期版本需开启实验性功能（
chrome://flags/#enable-pointer-events类似路径已过时，现为默认启用）
关键事件与 pointerType 区分输入源
pointerdown、pointermove、pointerup、pointercancel 四个核心事件覆盖全部交互流程。每个事件对象都带 pointerType 属性，值为 "mouse"、"touch" 或 "pen"，是识别压感笔的关键：
-
event.pointerType === 'pen'可精准触发笔专用逻辑（如启用橡皮擦、切换笔刷硬度） -
event.isPrimary用于判断是否为主指针（例如多点触控中第一个接触点，或笔尖首次按下） - 避免同时监听
click和pointerup，否则可能触发两次；建议禁用click（event.preventDefault()在pointerdown中阻止默认点击延迟）
利用 pressure 和 tiltX/tiltY 实现压感与倾斜响应
压感笔事件天然携带压力与角度信息，而鼠标/触摸则固定为 pressure: 0 或 0.5（规范定义），需合理归一化处理：
立即学习“前端免费学习笔记（深入）”；
-
event.pressure范围是0.0 ~ 1.0，多数数位板和 Windows Ink 设备支持；Safari 对 pressure 支持有限（iOS 不暴露，macOS 需外接设备） -
event.tiltX/event.tiltY表示笔相对于屏幕平面的倾斜角（-90°~90°），可用于模拟真实画笔侧锋效果 - 建议 fallback：当
pressure === 0且pointerType === 'pen'，可视为未校准，改用event.buttons === 1辅助判断按下状态
避免常见陷阱：主动取消、事件重叠与 polyfill 选择
实际开发中容易忽略的细节会影响体验一致性：
- 在
pointerdown中调用event.target.setPointerCapture(event.pointerId)，防止移出元素后丢失pointermove/up - 务必监听
pointercancel（如系统弹窗、页面滚动、低电量中断），及时释放 capture 并清理状态 - 避免混用
touch-action: none和pointer-events: none，前者禁用原生滚动缩放，后者会直接屏蔽所有 pointer 事件 - 如需兼容 IE10/11，可用 PEP（Pointer Events Polyfill），但注意其不支持
pressure和tilt
