setPointerCapture能解决拖拽中途移出元素的问题，因为它将指定pointerId的pointermove和pointerup事件强制绑定到当前元素，即使指针移出DOM可视区域；必须在pointerdown中调用、配对releasePointerCapture，并配合user-select: none和touch-action: none等样式控制。
为什么 setPointerCapture 能解决拖拽中途移出元素的问题
在 HTML 编辑器中实现组件拖拽时，常见问题是：鼠标按下后开始拖动，但一旦指针快速移出 drag-handle 元素或编辑器容器边界，pointermove 事件立刻停止触发，导致拖拽中断、位置错乱甚至 UI 卡死。这是因为 pointer 事件默认只在目标元素及其子树内派发。setPointerCapture 的作用就是把指定 pointerId 的后续所有 pointermove 和 pointerup（以及 pointercancel）强制绑定到当前元素上，哪怕指针已离开 DOM 树可视区域——这正是全局捕获的核心机制。
必须在 pointerdown 中调用，且需检查 captureState
调用时机错误是 90% 的失败原因。你不能在 mousedown 或自定义 dragStart 里调用它，必须严格在 pointerdown 事件回调中执行，并且要先确认元素支持捕获：
-
event.target.setPointerCapture(event.pointerId)是标准写法；不能传错pointerId（必须来自当前事件） - 调用前建议检查
event.target.hasPointerCapture(event.pointerId) === false，避免重复捕获报错InvalidStateError - 如果目标元素是
contenteditable区域或iframe子内容，捕获可能被浏览器拒绝（尤其 Safari），此时需降级监听document上的pointermove
释放捕获必须配对，且不能依赖 pointerup 冒泡
捕获不释放会导致后续所有 pointer 事件持续被该元素劫持，引发整个页面交互异常（比如点按钮没反应、滚动失效）。释放必须显式、及时、可靠：
- 在
pointerup和pointercancel两个事件里都调用event.target.releasePointerCapture(event.pointerId) - 不要只监听组件内部的
pointerup—— 拖拽过程中用户可能松手在编辑器外、工具栏上、甚至浏览器地址栏，所以应在document级注册一次pointerup监听器，用闭包或 Map 记录 activeDragId → target 映射来安全释放 - 切忌在组件
unmount或destroy时才释放——此时 pointer 可能早已 up，但捕获仍挂着
与 CSS user-select: none 和 touch-action 的协同
即使捕获生效，移动端或触控屏上仍可能因浏览器默认行为打断拖拽流。必须同步控制样式层：
立即学习“前端免费学习笔记（深入）”；
- 拖拽手柄元素需设置
user-select: none，否则 iOS Safari 会触发文本选中光标，吞掉后续 pointermove - 添加
touch-action: none（注意不是touch-action: manipulation），禁用浏览器原生滑动/缩放，确保所有 touch 事件转为 pointer 事件并进入捕获流 - 若编辑器使用
iframe作为编辑区，需在 iframedocument内也设置上述样式，否则捕获在跨 iframe 边界时失效
真正麻烦的不是调用 setPointerCapture 这一行代码，而是它把事件生命周期从“元素内”拉到了“全局”，意味着你必须自己管理 pointerId 的归属、释放时机、跨容器边界、以及和编辑器 focus/selection 状态的冲突。漏掉任何一个 releasePointerCapture，就等于在用户交互流里埋了一颗静默炸弹。
