将鼠标事件从标签页/窗口同步到另一实例的实现问题

为什么你的事件调度没效果？ #

你当前是直接给document派发鼠标事件，但页面上的交互元素（按钮、输入框等）的事件监听通常绑定在自身节点上。即便事件会冒泡，由于你没有命中具体的目标元素，这些元素的事件监听不会被触发——简单说，你把事件发给了文档根节点，但实际需要响应的是坐标点对应的那个元素。

另外，你的MouseEvent初始化参数缺少view: window，这个参数用于指定事件所属的窗口对象，虽为可选，但缺失可能导致事件上下文异常。

修改后的代码示例 #

window.addEventListener("message", (event) => {
  if (event.data.clientX && event.data.clientY) {
    const d = event.data;
    // 根据坐标获取目标元素
    const targetElement = document.elementFromPoint(d.clientX, d.clientY);
    if (!targetElement) return;

    // 给目标元素派发事件
    targetElement.dispatchEvent(new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window, // 补充窗口上下文
      clientX: d.clientX,
      clientY: d.clientY,
      detail: d.detail,
      screenX: d.screenX,
      screenY: d.screenY,
      button: d.button,
      ctrlKey: d.ctrlKey,
      altKey: d.altKey,
      shiftKey: d.shiftKey,
      metaKey: d.metaKey
    }));
  }
}, false);

额外注意事项 #

• 如果页面包含iframe，elementFromPoint只会获取当前窗口的元素，需要额外处理嵌套框架的情况。
• 部分网站会通过event.isTrusted判断事件是否由真实用户触发（伪造事件的该属性为false），如果目标应用有这种校验，需要通过Chrome DevTools协议注入事件或使用Puppeteer等工具绕过。

现成工具推荐 #

不用从零开发的话，可以试试这些工具：

• BrowserSync：可同时启动多个页面实例，自动同步点击、滚动、表单输入等所有用户交互，还支持实时重载，非常适合对比不同版本的应用响应。
• Puppeteer：可同时控制两个浏览器页面对象，同步触发事件并捕获性能数据，适合更自动化的对比场景。
• Chrome DevTools Remote Debugging：通过远程调试协议连接两个标签页，可手动同步交互或编写脚本批量处理。

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