5

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)?

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260

4 Answers4

5

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.

Useful post on dispatchEvent on clj.

RobG
  • 142,382
  • 31
  • 172
  • 209
3

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);
}
Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
  • 3
    @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. – RobG Jul 27 '11 at 02:15
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");
}

Taken from the MDC event.initMouseEvent reference and this SO question.

jsFiddle that you can test on different browsers.

Community
  • 1
  • 1
Digital Plane
  • 37,354
  • 7
  • 57
  • 59
  • 1
    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 :: http://fiddle.jshell.net/bSzqH/1/show/ :: dispatchClick :: line 22" data: no] in opera, it gives the following error: Uncaught exception: Error: WRONG_ARGUMENTS_ERR – user280109 Oct 14 '11 at 10:13
1

Given:

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

The following would invoke the hello world prompt:

document.getElementById("myButton").click();
Brian
  • 2,772
  • 15
  • 12
  • Using element.onclick() works in more browsers than element.click()- Works for non-form elements, if you assign an onclick function to the element. – kennebec Jul 27 '11 at 02:12
  • 2
    @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*. – RobG Jul 27 '11 at 02:35