Chrome浏览器区域外事件监听技巧
许多开发者在构建交互式网页元素（例如进度条）时，需要捕捉鼠标事件，即使鼠标指针移出了目标元素区域。传统的setCapture()和captureEvents()方法在Chrome浏览器中已被弃用或不再有效。本文介绍一种可靠的替代方案，利用addEventListener监听全局mousemove事件，实现区域外鼠标移动事件的捕捉。
此方法尤其适用于进度条拖动等场景。其核心思想是在鼠标按下时开始监听全局mousemove事件，并在鼠标释放时停止监听。
以下代码片段演示了如何在JavaScript中实现此功能：
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); // 使用 mouseup 而不是 mousedown
originalOnSelectStart = document.onselectstart;
document.onselectstart = () => false;
startPoint = { x: e.clientX, y: e.clientY }; // 使用 clientX 和 clientY
}
function handleMoving(e) {
if (!startPoint) return;
// 执行进度条拖动逻辑
const deltaX = e.clientX - startPoint.x;
// ... 更新进度条位置 ...
}
function handleMoveEnd(e) {
window.removeEventListener('mousemove', handleMoving);
window.removeEventListener('mouseup', handleMoveEnd);
startPoint = undefined;
if (document.onselectstart !== originalOnSelectStart) {
document.onselectstart = originalOnSelectStart;
}
}
这段代码首先在按钮上绑定mousedown事件。handleMoveStart函数在鼠标按下时执行，阻止事件冒泡和默认行为，清除文本选择，并添加全局mousemove和mouseup事件监听器（注意这里使用mouseup代替了原代码中的mousedown，更符合逻辑）。handleMoving函数在鼠标移动时执行，开发者应在此处编写进度条拖动逻辑。handleMoveEnd函数在鼠标抬起时执行，移除全局事件监听器并恢复document.onselectstart属性的原始值。 代码使用了clientX和clientY来获取鼠标坐标，相对于pageX和pageY更稳定。 通过此方法，即使鼠标离开进度条区域，也能持续捕捉鼠标移动事件，从而实现拖动功能。 该代码适用于JavaScript，无需TypeScript。
