许多开发者在构建交互式UI元素（例如可拖动的进度条）时，常常需要处理一个棘手的问题：如何让鼠标事件在目标元素区域外仍然有效？Chrome浏览器不支持传统的setCapture()方法，window.captureEvents()也已被弃用。本文介绍一种在Chrome中有效捕获区域外mousemove事件的解决方案，即使鼠标离开目标元素，也能继续响应拖动操作。
核心策略是：监听mousedown事件以启动拖动，然后在window对象上监听mousemove事件追踪鼠标移动。同时，在mousedown事件中添加事件监听器，并在mouseup事件中移除这些监听器。以下代码片段阐述了这一方法：
const button = document.querySelector('button');
button?.addEventListener('mousedown', handleMoveStart);
let startPoint;
let originalOnSelectStart = null;
function handleMoveStart(e) {
e.stopPropagation();
if (e.ctrlKey || [1, 2].includes(e.button)) return;
window.getSelection()?.removeAllRanges();
e.stopImmediatePropagation();
window.addEventListener('mousemove', handleMoving);
window.addEventListener('mouseup', handleMoveEnd);
originalOnSelectStart = document.onselectstart;
document.onselectstart = () => false;
startPoint = { x: e.clientX, y: e.clientY };
}
function handleMoving(e) {
if (!startPoint) return;
// 拖动逻辑代码
const deltaX = e.clientX - startPoint.x;
const deltaY = e.clientY - startPoint.y;
// 使用 deltaX 和 deltaY 更新 UI 元素位置
}
function handleMoveEnd(e) {
window.removeEventListener('mousemove', handleMoving);
window.removeEventListener('mouseup', handleMoveEnd);
startPoint = undefined;
if (document.onselectstart !== originalOnSelectStart) {
document.onselectstart = originalOnSelectStart;
}
}
代码首先在按钮元素上绑定mousedown事件监听器handleMoveStart。鼠标按下时，它阻止事件冒泡和默认行为，清除任何文本选择。然后，它在window对象上添加mousemove监听器handleMoving来跟踪鼠标移动，以及mouseup监听器handleMoveEnd来结束拖动。handleMoveEnd函数在鼠标松开时移除事件监听器，并恢复文档的onselectstart属性，防止文本选择干扰拖动。handleMoving函数包含具体的拖动逻辑（此处用注释代替）。 通过这种方式，即使鼠标移出按钮区域，也能持续监听mousemove事件，从而实现区域外事件捕获。 注意代码中使用了clientX和clientY，更准确地获取鼠标坐标。
