PointerEvent cancel：pointercancel 与手势恢复

--- title: "PointerEvent cancel：pointercancel 与手势恢复" keywords: - pointercancel - Pointer Events - 手势中断 - 恢复策略 - 触控滚动 description: "说明 `pointercancel` 的触发场景（滚动、系统手势、设备中断），在绘图/拖拽中正确处理中断与状态清理，并与捕获与合并事件协作。" categories: - 应用软件 - 系统工具 --- 概述 `pointercancel` 在指针活动被系统打断时触发（如滚动、系统手势、设备变更），应用应停止当前手势、清理状态并允许下次重启，避免残留捕获与异常路径。 示例 ```js 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