JavaScript跨浏览器单击HTML DOM元素



是否有一个普通的JavaScript跨浏览器功能,能够触发HTML DOM元素(包括非表单元素,如div)上的单击事件?

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

如果所有浏览器都支持单一模型(比如W3C事件模型),生活将会很美好。但他们没有。不仅如此,一些浏览器拒绝以与"真实"事件相同的方式响应编程事件。例如,在Firefox中使用displatchEvent在链接上调度点击事件不会导致浏览器跟随该链接(但如果有的话会触发onclick侦听器)。大多数其他浏览器将遵循该链接。

IE不支持dispatchEvent直到版本8(也许9),它有fireEvent类似但不同。

HTML5(它还不是一个标准,也许永远不会)已经为HTMLElement接口引入了一个click方法,但是它还没有完全实现,不能依赖。它可能用于您知道或可以控制将使用该页面的浏览器版本的环境。

你也可以直接调用元素的onclick属性,如果一个监听器已经被分配给该属性或内联,但这当然不是一个真正的事件。

在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);
}
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");
}

取自MDC事件。initMouseEvent引用和这个SO问题

jsFiddle可以在不同的浏览器上测试

给定:

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

下面的代码将调用hello world提示符:

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

最新更新