Is there a vanilla JavaScript cross-browser function available that is able to trigger a click event on a HTML DOM element (including non-form elements like a div)?
1
-
Related: stackoverflow.com/questions/2490825/…Digital Plane– Digital Plane2011-07-27 02:06:16 +00:00Commented Jul 27, 2011 at 2:06
Add a comment
|
4 Answers
Most who go down this path either end up developing their own event managment system (which isn't that hard but is annoying) or work within the available capabilities.
If all browsers supported a single model, (say the W3C event model), life would be sweet. But they don't. And not only that, some browsers refuse to respond to programmatic events the same way as "real" events. e.g. dispatching a click event using displatchEvent on a link in Firefox will not cause the browser to follow the link (but will trigger the onclick listener if there is one). Most other browsers will follow the link.
IE didn't support dispatchEvent up to version 8 (perhaps 9 does), it has fireEvent which is similar but different.
HTML5 (which is not a standard yet, maybe it never will be) has introduced a click method for the HTMLElement interface, however it's not fully implemented yet and can't be relied upon. It can likely be used for environments where you know or can control the browser versions that will be using the page.
You can also just call the element's onclick property if a listener has been assigned to the property or inline, but of course that's not like a real event.
Comments
Found this elusive function on Mozilla documentation: https://developer.mozilla.org/En/DOM/Document.createEvent, and here too: 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);
}
1 Comment
RobG
@Samuel - not everyone has the latest browser (very few typical users do). IE < 9 does not support dispatchEvent, if HTML5 is widely adopted then you can epxect the HTMLElement click method to be preferred. But there are way too many browsers in use that don't support it for it to be useful on the general web at the moment. Also, browsers may respond to programmatic events differently to how they respond to user initiated events.
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");
}
Taken from the MDC event.initMouseEvent reference and this SO question.
jsFiddle that you can test on different browsers.
1 Comment
user280109
the jsfiddle thing doesnt work in firefox 7 or 8, or opera 11 in firefox 7 + 8 it gives the following error: Error: uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: fiddle.jshell.net/bSzqH/1/show :: dispatchClick :: line 22" data: no] in opera, it gives the following error: Uncaught exception: Error: WRONG_ARGUMENTS_ERR
Given:
<input type="button" id="myButton" onclick="alert('hello world');"/>
The following would invoke the hello world prompt:
document.getElementById("myButton").click();
2 Comments
kennebec
Using element.onclick() works in more browsers than element.click()- Works for non-form elements, if you assign an onclick function to the element.
RobG
@kennebec - but simply calling onclick doesn't dispatch an event, so it's not the same thing. Nor will it call events added using addEventListener.