如何将点击事件及所有关联信息从一个元素传递到另一个元素

示例代码 #

JavaScript #

document.querySelector('#b').addEventListener('click', (e) => {
  document.querySelector('#a').click();
});

HTML #

<a id="a" href="https://wikipedia.org">google raw</a>
<button id="b" type="button">click me while holding Ctrl on windows or Cmd on Mac</button>

预期效果 #

在Windows系统按住Ctrl键或Mac系统按住Cmd键点击按钮时，维基百科链接在新标签页打开；直接点击则在当前标签页打开，与点击<a>标签的效果完全一致。

实际问题 #

调用click()方法时，Ctrl/Cmd等按键的状态并未被传递，因此无法触发对应快捷键下的浏览器默认行为。仅传递Ctrl/Cmd键状态的方案勉强可行，但理想方案应该传递所有关联事件信息。

使用场景 #

表格中展示文件列表，HTML结构如下：

<tr><td><a href="...">filename</a></td><td>size</td><td>date</td></tr>

希望点击表格任意一行时，效果等同于点击该行内的链接，但无法修改HTML结构——因为Kodi等程序对文件名的HTML解析逻辑是硬编码的，遵循早期nginx规范。

重要提示 #

理想方案不应仅针对Ctrl/Cmd键，而应是通用的事件传递方案，让浏览器按自身预设逻辑处理事件。手动判断metaKey和ctrlKey并不保险，不同浏览器对Shift等按键的处理存在差异：

• Mac系统Firefox：Cmd+点击在新标签页打开，Shift+点击在新窗口打开，Cmd+Shift+点击在新标签页打开并切换
• Mac系统Safari：Cmd+点击在新标签页打开，Shift+点击添加到阅读列表，Cmd+Shift+点击在新标签页打开并切换
• Chrome：与Firefox行为一致

因此理想方案应直接传递原始事件，由浏览器自行决定处理逻辑。

解决方案 #

要实现完整传递事件状态的模拟点击，不能直接调用<a>的click()方法，而是需要手动创建并分发一个包含所有原始事件属性的MouseEvent：

// 为表格行绑定点击事件
document.querySelectorAll('tr').forEach(tr => {
  tr.addEventListener('click', (originalEvent) => {
    const link = tr.querySelector('a');
    if (!link) return;

    // 创建与原始事件属性一致的MouseEvent
    const simulatedClick = new MouseEvent('click', {
      bubbles: originalEvent.bubbles,
      cancelable: originalEvent.cancelable,
      view: originalEvent.view,
      detail: originalEvent.detail,
      screenX: originalEvent.screenX,
      screenY: originalEvent.screenY,
      clientX: originalEvent.clientX,
      clientY: originalEvent.clientY,
      ctrlKey: originalEvent.ctrlKey,
      altKey: originalEvent.altKey,
      shiftKey: originalEvent.shiftKey,
      metaKey: originalEvent.metaKey,
      button: originalEvent.button,
      relatedTarget: originalEvent.relatedTarget
    });

    // 分发模拟事件到链接元素
    link.dispatchEvent(simulatedClick);
  });
});

方案说明 #

• 该方案通过复制原始点击事件的所有关键属性（包括按键状态、鼠标位置等），创建一个完全一致的模拟点击事件
• 调用dispatchEvent()分发事件，让浏览器以原生逻辑处理该事件，完美还原点击<a>标签的所有行为
• 无需修改原有HTML结构，完全适配指定使用场景

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