调度点击事件并保留击键修饰符

Posted 2023-03-29

【中文标题】调度点击事件并保留击键修饰符

【英文标题】：Dispatch click event and keep keystroke modifiers

【发布时间】：2012-09-15 23:39:08

【问题描述】：

我想监听特定元素上的点击事件，然后将其分派给链接元素，同时牢记元键是否被保留。

例如： 假设我有一个元素表。当用户单击一行时，我想关注一个链接，但如果用户有他的 ⌘ /ctrl，我希望在新选项卡中打开该链接按下了键。

这看起来很简单，但我发现这很棘手......（因为我没有成功！）

【参考方案1】：

假设您只需要记住来自合法用户操作的修饰键，DOM 事件 API 已经提供了您所需的一切。

当使用addEventListener 捕获事件时，只需将参数（即DOMEvent 实例）传递给您的处理函数，然后使用dispatchEvent 将其重新发送到您的目标元素：)

确实，DOMEvent 实例封装了它的源环境。更具体地说，MouseEvent 知道在触发时按下了哪些键。

---

演示：例如，尝试单击this JSfiddle 中的链接，同时按住⌘（或ctrl，如果不是在Mac 上）。

为了完整的参考，这里是使用的代码：

var button = document.getElementById('source'),
    target = document.getElementById('target');

function handler(evt) 
    target.dispatchEvent(evt); // that's all the magic it takes


button.addEventListener(
    'click', // listen to a click event
    handler,
    false // no capture, i.e. do not catch events before children
);​

---

您可能还会发现 this complete reference on DOM events 很有用:)

【讨论】：

我已经尝试过了，但您没有收到此错误：未捕获错误：DISPATCH_REQUEST_ERR：DOM 事件异常 1？

@NimaIzadi 我只用 Safari 5 进行了测试，它在其中工作。事实上，Chrome 21 会抛出 DISPATCH_REQUEST_ERR... 而 FF 14 会抛出 NS_ERROR_ILLEGAL_VALUE。很有趣。我正在尝试进行更多调查。

DISPATCH_REQUEST_ERR 来自事件是already dispatched。我尝试stopPropagation() 但这并没有改变任何东西。因此，我只考虑两种方式。首先是通过createEvent和initMouseEvent克隆事件（写的很烦，但是可以在辅助函数中）；由于isTrusted 属性，这可能不会在后台打开链接...

…（参考isTrustedhere）。不过，这应该在每个浏览器中进行测试。第二种方式，也需要测试，有点难看：在它完成冒泡之后添加超时和dispatch 事件。

太棒了！ setTimeout 在 Webkit（Chrome 21 和 Safari 6）上明显有效，但在 FF 上无效。它对 FF 没有任何作用......（既不抛出 NS_ERROR_ILLEGAL_VALUE）