JS拖拽交互必用setPointerCapture方法
内容提要
文章指出，传统在 document 上监听 mousedown 和 mousemove 实现拖拽的方式已过时，推荐改用 pointerdown、pointermove、pointerup 等 Pointer 事件，并将事件直接绑定在触发元素上。为解决快速拖动时指针移出元素导致事件丢失的问题，可用 setPointerCapture 捕获 pointerId，使后续事件持续以该元素为目标，释放时调用 releasePointerCapture。文中还介绍了 pointer-events、touch-action 及已废弃的 setCapture 等相关知识。
延伸解读
从鼠标事件到指针事件：拖拽实现的范式转变
文章指出，传统在 document 上监听 mousedown 和 mousemove 的拖拽方式已过时。推荐改用 pointerdown、pointermove、pointerup 等 Pointer 事件，并将事件直接绑定在触发元素上。这种转变不仅简化了代码结构，还统一了 PC 和移动端的处理逻辑，避免了为不同设备编写多套事件监听。
setPointerCapture 如何解决快速拖拽丢失问题
快速拖动时，指针可能移出触发元素，导致 pointermove 事件不再触发。setPointerCapture 通过捕获 pointerId，使后续事件持续以该元素为目标，直到释放。文章示例中，在 pointerdown 时调用 setPointerCapture，并在 pointerup、pointercancel 和 lostpointercapture 时释放，确保了拖拽的流畅性。
相关 API 的注意事项与废弃方法
文章提到，CSS 的 pointer-events: none 可以阻止 JS pointer 事件，但无法阻止 focus 交互；touch-action 可用于防止拖拽与原生滚动冲突。此外，旧的 setCapture() 方法已废弃，不应使用。这些细节提醒开发者注意兼容性和替代方案，避免踩坑。
Q&A
为什么说用 mousedown 实现拖拽已经过时了？
传统在 document 上监听 mousedown 和 mousemove 实现拖拽的方式已过时，推荐改用 Pointer 事件（pointerdown、pointermove、pointerup），并将事件直接绑定在触发元素上，这样 PC 和移动端都适用。
setPointerCapture 方法在拖拽中起什么作用？
setPointerCapture 可以捕获事件的 pointerId，在鼠标或手势释放之前，后续所有事件都将以该捕获元素为目标，因此即使快速拖动导致指针移出元素，事件也不会丢失。
如何用 Pointer 事件实现一个简单的拖拽效果？
在触发元素上监听 pointerdown，在事件处理中调用 setPointerCapture(event.pointerId) 并设置拖拽标志；监听 pointermove 计算位置；在 pointerup、pointercancel 和 lostpointercapture 事件中调用 releasePointerCapture 并重置标志。
拖拽时如何避免与页面滚动冲突？
可以使用 CSS 的 touch-action 属性来阻止触摸滚动，从而防止拖拽与原生滚动冲突。
pointer-events: none 对 Pointer 事件有什么影响？
CSS 的 pointer-events: none 可以阻止 JS Pointer 相关的事件触发，但不会阻止 focus 交互。
setCapture 方法还能用吗？
老的 setCapture() 方法已经废弃，不应再使用。
