"PointerEvent cancel：pointercancel 与手势恢复"

---

title: "PointerEvent cancel：pointercancel 与手势恢复"

keywords:

• pointercancel
• Pointer Events
• 手势中断
• 恢复策略
• 触控滚动

description: "说明 pointercancel 的触发场景（滚动、系统手势、设备中断），在绘图/拖拽中正确处理中断与状态清理，并与捕获与合并事件协作。"

categories:

• 应用软件
• 系统工具

---

概述

pointercancel 在指针活动被系统打断时触发（如滚动、系统手势、设备变更），应用应停止当前手势、清理状态并允许下次重启，避免残留捕获与异常路径。

示例

const el = document.getElementById('canvas')
el.addEventListener('pointerdown', e => start(e))
el.addEventListener('pointermove', e => move(e))
el.addEventListener('pointerup', e => end(e))
el.addEventListener('pointercancel', e => cancel(e))
function cancel(e){ resetGesture(); el.releasePointerCapture?.(e.pointerId) }

工程建议

• 捕获与合并：结合 setPointerCapture 与 getCoalescedEvents()；在取消时释放捕获与队列。
• 与触控滚动：设置 touch-action 准确声明手势与滚动关系；避免冲突。
• 兼容：在旧浏览器回退到 touchcancel/mouseleave 等事件；保持一致逻辑。

参考与验证

• MDN Pointer Events 文档：https://developer.mozilla.org/docs/Web/API/Pointer_events