Pointer Capture API：setPointerCapture 与拖拽交互稳定性

--- title: "Pointer Capture API：setPointerCapture 与拖拽交互稳定性" keywords: - setPointerCapture - releasePointerCapture - pointerId - 拖拽 - 稳定性 description: "介绍 Pointer Capture 的指针捕获与释放模型，在拖拽/绘图场景确保事件目标稳定，减少丢失与抖动，提供示例与工程建议。" categories: - 应用软件 - 视频软件 --- 概述 在拖拽或绘图中，指针可能离开原目标元素导致事件分发改变。`setPointerCapture(pointerId)` 允许元素捕获该指针的后续事件，直至释放，提升交互稳定性。 示例 ```js const el = document.getElementById('drag') el.addEventListener('pointerdown', e => { el.setPointerCapture(e.pointerId) }) el.addEventListener('pointermove', e => { /* 根据 e.clientX/e.clientY 更新位置 */ }) el.addEventListener('pointerup', e => { el.releasePointerCapture(e.pointerId) }) ``` 工程建议 - 捕获时机：在开始拖拽时捕获；在结束或取消时释放；处理多指针场景。 - 兼容：与 `touch-action`/`passive` 选项协同；避免滚动冲突。 - 性能：批处理坐标与绘制；结合 `getCoalescedEvents()` 平滑路径。 参考与验证 - MDN Pointer capture 文档：https://developer.mozilla.org/docs/Web/API/Element/setPointerCapture - W3C Pointer Events 规范：https://www.w3.org/TR/pointerevents3/