如何在不使用 setCapture() 的情况下实现区域外拖动事件触发？

chrome 区域外事件捕捉

在 chrome 浏览器中，使用 setcapture() 和 window.captureevents() 来实现区域外事件捕捉已不再可行。那么，如何实现进度条拖动至进度条区域外，仍然触发鼠标移动事件呢？

为此，我们采用以下解决方案：

使用 addeventlistener 监听 mousedown 事件。记录鼠标起始位置。禁用文本选择，防止干扰拖动。监听 mousemove 和 mousedown 事件，在区域外继续触发移动事件。

具体代码如下：

const button = document.querySelector('button');button?.addEventListener('mousedown', handleMoveStart);let startPoint: { x: number; y: number } | undefined;let originalOnSelectStart: Document['onselectstart'] = null;function handleMoveStart(e: MouseEvent) {  e.stopPropagation();  if (e.ctrlKey || [1, 2].includes(e.button)) return;  window.getSelection()?.removeAllRanges();  e.stopImmediatePropagation();  window.addEventListener('mousemove', handleMoving);  window.addEventListener('mousedown', handleMoveEnd);  originalOnSelectStart = document.onselectstart;  document.onselectstart = () => false;  startPoint = { x: e.x, y: e.y };}function handleMoving(e: MouseEvent) {  if (!startPoint) return;  // DO Something}function handleMoveEnd(e: MouseEvent) {  window.removeEventListener('mousemove', handleMoving);  window.removeEventListener('mousedown', handleMoveEnd);  startPoint = undefined;  if (document.onselectstart !== originalOnSelectStart) {    document.onselectstart = originalOnSelectStart;  }}

登录后复制

以上就是如何在不使用 setCapture() 的情况下实现区域外拖动事件触发？的详细内容，更多请关注【创想鸟】其它相关文章！