Pointer Events：统一输入模型与压感

---

title: Pointer Events：统一输入模型与压感

keywords:

• Pointer Events
• pointerdown/move/up
• pointerType
• pressure
• 触控笔

description: 使用 Pointer Events 统一鼠标、触控与触控笔输入，读取类型与压感，并配合捕获与无障碍策略提升交互质量。

categories:

• 文章资讯
• 技术教程

---

概述

Pointer Events 将不同输入抽象为统一事件，提供 pointerType、pressure 等属性并支持捕获与取消。适用于绘图、拖拽与复杂交互。

用法/示例

const el = document.querySelector('#pad')
el.addEventListener('pointerdown', e => {
  el.setPointerCapture(e.pointerId)
})
el.addEventListener('pointermove', e => {
  const type = e.pointerType // mouse/touch/pen
  const p = e.pressure // 0..1
})
el.addEventListener('pointerup', e => {
  el.releasePointerCapture(e.pointerId)
})

工程建议

• 提供键盘与辅助技术的交互替代；在绘图与拖拽中谨慎使用捕获避免冲突。
• 针对 touch-action 设置（如 none）以控制默认手势与滚动行为。
• 在高频交互中节流与合成优化，避免布局与重绘开销。

参考与验证

• MDN：Pointer Events — https://developer.mozilla.org/docs/Web/API/Pointer_events
• W3C：Pointer Events — https://www.w3.org/TR/pointerevents/