如何防止用户鼠标指针事件干扰模拟鼠标事件？

我正尝试在DOM中模拟鼠标事件来执行操作，比如将指针从A点移动到B点完成选择。以下是我使用的事件示例代码：

const start = {
    clientX: start.left + 1,
    clientY: start.top + start.height / 2,
    bubbles: true,
    shiftKey: false,
};

const end = {
    clientX: end.right,
    clientY: end.bottom - end.height / 2,
    bubbles: true,
    shiftKey: false,
};

target.dispatchEvent(new MouseEvent('mousedown', end));
target.dispatchEvent(new MouseEvent('mousemove', start));
target.dispatchEvent(new MouseEvent('mouseup', start));

这段代码能在target元素上完成选择，正常运行没问题，但如果用户在此期间移动鼠标，真实的鼠标指针事件会干扰模拟事件，导致选择出错。

我试过用element.requestPointerLock()，但这个方法在释放指针锁定前会在屏幕上显示信息气泡，不太理想。请问有没有办法防止用户指针事件干扰代码触发的模拟事件？

可以从以下几个实用方向解决这个问题：

1. 临时拦截用户鼠标事件 #

在模拟事件执行前后，给目标元素添加捕获阶段的事件拦截逻辑，优先阻止真实事件的传递：

// 定义拦截函数
const blockRealMouseEvents = (e) => {
  e.stopImmediatePropagation();
  e.preventDefault();
};

// 模拟开始前，绑定拦截监听（捕获阶段触发）
target.addEventListener('mousedown', blockRealMouseEvents, true);
target.addEventListener('mousemove', blockRealMouseEvents, true);
target.addEventListener('mouseup', blockRealMouseEvents, true);

// 执行你的模拟事件逻辑
target.dispatchEvent(new MouseEvent('mousedown', end));
target.dispatchEvent(new MouseEvent('mousemove', start));
target.dispatchEvent(new MouseEvent('mouseup', start));

// 模拟完成后移除拦截监听
setTimeout(() => {
  target.removeEventListener('mousedown', blockRealMouseEvents, true);
  target.removeEventListener('mousemove', blockRealMouseEvents, true);
  target.removeEventListener('mouseup', blockRealMouseEvents, true);
}, 0);

2. 用标记区分模拟与真实事件 #

给模拟事件添加自定义属性，同时设置全局状态标记，在事件处理逻辑中跳过真实事件：

// 模拟开始前标记全局状态
window.isSimulatingMouse = true;

// 给模拟事件添加自定义标记
const simulatedDown = new MouseEvent('mousedown', {
  ...end,
  isSimulated: true
});
const simulatedMove = new MouseEvent('mousemove', {
  ...start,
  isSimulated: true
});
const simulatedUp = new MouseEvent('mouseup', {
  ...start,
  isSimulated: true
});

// 执行模拟
target.dispatchEvent(simulatedDown);
target.dispatchEvent(simulatedMove);
target.dispatchEvent(simulatedUp);

// 模拟结束后取消标记
window.isSimulatingMouse = false;

// 在你的事件处理函数中添加判断
target.addEventListener('mousedown', (e) => {
  // 如果是真实事件且正处于模拟状态，直接跳过
  if (!e.isSimulated && window.isSimulatingMouse) {
    e.stopPropagation();
    e.preventDefault();
    return;
  }
  // 正常处理逻辑
});

3. 用CSS临时屏蔽真实鼠标 #

通过CSS让页面忽略真实鼠标事件，同时隐藏指针：

/* 临时类，模拟期间添加 */
.simulating-mouse-lock {
  cursor: none !important;
  pointer-events: none !important;
}

// 模拟开始前给body添加类
document.body.classList.add('simulating-mouse-lock');

// 执行模拟事件...
target.dispatchEvent(new MouseEvent('mousedown', end));
target.dispatchEvent(new MouseEvent('mousemove', start));
target.dispatchEvent(new MouseEvent('mouseup', start));

// 模拟完成后移除类
setTimeout(() => {
  document.body.classList.remove('simulating-mouse-lock');
}, 0);

内容的提问来源于stack exchange，提问作者Samarth Agarwal