by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12481
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
一、还在mousedown个棒槌
关于拖拽的文章，我之前写过至少两三篇，之前实现逻辑都是这样。
一个拖拽标志量，一个存储数据的变量。
mousedown后标志量开启，存储初始数据，
然后在document文档上绑定mousemove，实时计算位置。
等mouseup后再恢复和处理。
用了很多年，自我感觉也挺好的，眼睛闭着都能手写出来。
实际上，上面这套实现已经过时了，且过时很久了。
现在还在使用mousedown实现拖拽效果，那就是个棒槌了。
应该使用pointerdown、pointerup这类事件（PC、Mobile双通），同时，移动的事件也不需要绑定在document或者<body>元素上了，直接写在触发元素上即可！
有人会问了，要是拖动太快，鼠标从触发元素上移出，岂不是pointermove事件不会触发？
是有这个问题，不过，此事件在设计的时候就考虑到这种场景了，于是设计了setPointerCapture方法，专门针对此问题。
二、setPointerCapture与拖拽
setPointerCapture可以捕获事件的pointerId，在鼠标或手势释放之前，后续所有事件都将以该捕获元素为目标。
所以拖拽的时候，不要担心目标元素会丢失。
眼见为实，直接看案例，假设一个球是ball：
<div class="ball" id="ball"></div>
那么所有拖拽事件都可以绑定在 ball 元素上，通过setPointerCapture捕获，不要担心拖拽行为那么容易丢失。
JS代码参考示意：
let dragging = false; let offsetX = 0; let offsetY = 0; ball.addEventListener("pointerdown", function (event) { dragging = true; // 最关键代码就是我 ball.setPointerCapture(event.pointerId); ... }); ball.addEventListener("pointermove", function (event) { if (dragging == false) { return; } ... }); const stopDrag = function (event) { dragging = false; if (ball.hasPointerCapture(event.pointerId)) { ball.releasePointerCapture(event.pointerId); } }; ball.addEventListener("pointerup", stopDrag); ball.addEventListener("pointercancel", stopDrag); ball.addEventListener("lostpointercapture", stopDrag); 鼠标或手指按下的时候setPointerCapture，抬起的时候释放releasePointerCapture，就可以完成体验流畅的拖拽效果啦。
眼见为实，您可以狠狠地点击这里：setPointerCapture实现小球拖拽demo
演示效果是AI生成的，虽然不是我的UI美学风格，但是算了，省心啊，嘿嘿😋。
三、在唠叨点什么，水些字数
哎呀，内容有点少了，再水些内容吧。
说到Pointer，我不自觉又联想到了requestPointerLock，这个是用来实现无限滚动的，属于JS Pointer Lock的内容，之前写文章介绍过：鼠标无限移动 JS API Pointer Lock简介
CSS的pointer-events:none可以干掉JS pointer相关的事件，不过却阻止不了focus交互。
还有啥，好有啥，我想想……
哦，还有个touch-action，与触摸有关的，可以阻止滚动啥的，可以防止自怼拖拽和原生滚动冲突。
然后老的setCapture()方法已经废弃了，万不可使用。
噢啦，差不多就这么多了。
感谢大家的阅读，周末愉快，祝我爆护。
这是我上周末钓的，168五小时，钓得都铺出来了，😁😁。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12481
（本篇完）
