JavaScript 跨浏览器单击 HTML DOM 元素

Question

是否有可用的原生 JavaScript 跨浏览器功能，能够触发 HTML DOM 元素（包括 div 等非表单元素）上的点击事件？

Answer 1

大多数走这条路的人要么最终开发自己的事件管理系统（这并不难，但很烦人），要么在可用功能范围内工作。

如果所有浏览器都支持一个模型，（比如 W3C 事件模型），生活会很美好。但他们没有。不仅如此，一些浏览器拒绝以与“真实”事件相同的方式响应编程事件。例如在 Firefox 中的链接上使用 displatchEvent 分派点击事件不会导致浏览器跟随该链接（但会触发 onclick 监听器，如果有的话）。大多数其他浏览器都会跟随该链接。

IE 不支持 dispatchEvent 直到版本 8（也许 9 支持），它有 fireEvent 类似但不同。

HTML5（这还不是一个标准，也许永远不会）为HTMLElement interface 引入了一个click 方法，但是它还没有完全实现并且不能被依赖。它可能用于您知道或可以控制将使用该页面的浏览器版本的环境。

如果侦听器已分配给属性或内联，您也可以只调用元素的 onclick 属性，但这当然不像真正的事件。

Useful post on dispatchEvent on clj.

Answer 2

var target = document;//<--(insert your target here);
if(document.createEvent){
  var clickEvent = document.createEvent("MouseEvents");
  clickEvent.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, 0, null);
  target.dispatchEvent(clickEvent);
}
else{
  target.fireEvent("onclick");
}

取自the MDC event.initMouseEvent reference 和this SO question。

jsFiddle，您可以在不同的浏览器上进行测试。

Answer 3

在 Mozilla 文档中发现了这个难以捉摸的功能：https://developer.mozilla.org/En/DOM/Document.createEvent，在这里也是：http://javascript.gakaa.com/document-createevent-4-0-5-.aspx

function performClick(node) {
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("mousedown", true, true);
    document.getElementById("myElement").dispatchEvent(evt);
}

Answer 4

给定：

<input type="button" id="myButton" onclick="alert('hello world');"/>

以下将调用 hello world 提示：

document.getElementById("myButton").click();