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

标签 javascript onclick dom-events modifier-key

我想监听特定元素上的点击事件,然后将其分派(dispatch)给链接元素,同时牢记元键是否被按住。

例如:
假设我有一张元素表。当用户点击一行时,我想点击一个链接,但如果用户有他的 /ctrl 我希望链接在新选项卡中打开按下键。

这看起来很简单,但我发现这很棘手......(因为我没有成功!)

最佳答案

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有用:)

关于javascript - 调度点击事件并保留击键修饰符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12443288/

相关文章:

javascript - 如何在单击时更改颜色,以选择一个按钮进行加载

android - 为 100 个按钮设置 OnClick

javascript - 在 Safari 4 窗口中停止按键事件冒泡

javascript - 使用异步函数等待来自 onclick 的用户输入

javascript - Google map v3 tileloaded 事件

javascript - 倒计时时钟 (JS)

javascript - setDate() 在 31 日设置了错误的日期?

javascript - 改造:package.json 和 package-lock.json 不同步

javascript - Firebase图像以异步等待方式上传

javascript - 如何在多次点击事件上创建队列