如何在 DIV 元素上合成浏览器点击事件？答案

【问题标题】：How do I synthesize a browser click event on a DIV element?如何在 DIV 元素上合成浏览器点击事件？
【发布时间】：2011-07-06 19:10:18
【问题描述】：

使用按钮，我可以在它们上调用click() 方法来生成点击。然而，DIV 并非在所有浏览器上都有此方法。但是我可以将点击事件监听器附加到它们（通过设置.onclick="..." 或添加事件监听器）。

有什么方法可以让我以编程方式“合成”对此类元素的点击，但不使用 jQuery？理想情况下，这将不依赖于注册侦听器的特定方式（因此简单地调用 eval(div.onclick) 对我不起作用），并且适用于所有现代浏览器。

（出于好奇，我需要这个来进行自动化测试，而不是欺骗用户。）

【问题讨论】：

如果单击不起作用，则可以使用 onmousedown/onmouseup 作为解决方法。如果没有其中任何一个，标准的拖放库将无法工作。
所以 - 让我直截了当 - 你想要跨浏览器 javascript - 并且不想使用 jQuery？你要么为失败做好准备，要么付出很多努力。
为什么 eval(div.onclick) 不适合你？
@wiifm 不，他不是，这也不难。人们过于依赖 jQuery。如果你做了一些研究，你会发现一个跨浏览器的实现只需要不超过九行。
@wiifm 可能有一百万个不使用它的正当理由。毕竟，我的问题不是“如果我想……我应该使用 jQuery”。

标签： javascript dom browser dom-events

【解决方案1】：

我最近在我的库中写了一个函数来实现这一点，它可以在 GitHub 存储库here 中找到。

完全跨浏览器，在选择器引擎返回的元素上触发指定事件。我相信您将能够从中提取您需要的代码。

如果没有，这就是您需要的。用元素替换元素。并输入事件类型，在本例中为click。

// Check for createEventObject
if(document.createEventObject){
    // Trigger for Internet Explorer
    trigger = document.createEventObject();
    element.fireEvent('on' + type, trigger);
}
else {
    // Trigger for the good browsers
    trigger = document.createEvent('HTMLEvents');
    trigger.initEvent(type, true, true);
    element.dispatchEvent(trigger);
}

这是一个示例实现。

function simulateEvent(element, type) {
    // Check for createEventObject
    if(document.createEventObject){
        // Trigger for Internet Explorer
        trigger = document.createEventObject();
        element.fireEvent('on' + type, trigger);
    }
    else {
        // Trigger for the good browsers
        trigger = document.createEvent('HTMLEvents');
        trigger.initEvent(type, true, true);
        element.dispatchEvent(trigger);
    }
}

【讨论】：

谢谢！这正是我想要的。

【解决方案2】：

如果您的浏览器与 DOM 兼容，您可以使用 DIV 元素的dispatchEvent(evt) 方法。

欲了解更多信息，请参阅dom w3c spec。

【讨论】：

“DOM 兼容”是否包括任何版本的 IE？
不。好吧，我知道任何低于 IE9 的东西都不支持它。我不确定 IE9，但它可能会（手指交叉微软这次做对了！）。