How do I programmatically click on an element in JavaScript?

Question

In IE, I can just call element.click() from JavaScript - how do I accomplish the same task in Firefox? Ideally I'd like to have some JavaScript that would work equally well cross-browser, but if necessary I'll have different per-browser JavaScript for this.

Solution 1

The document.createEvent documentation says that "The createEvent method is deprecated. Use event constructors instead."

So you should use this method instead:

var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

and fire it on an element like this:

element.dispatchEvent(clickEvent);

as shown here.

Solution 2

For firefox links appear to be "special". The only way I was able to get this working was to use the createEvent described here on MDN and call the initMouseEvent function. Even that didn't work completely, I had to manually tell the browser to open a link...

var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);

while (element)
{
    if (element.tagName == "A" && element.href != "")
    {
        if (element.target == "_blank") { window.open(element.href, element.target); }
        else { document.location = element.href; }
        element = null;
    }
    else
    {
        element = element.parentElement;
    }
}

Solution 3

Using jQuery you can do exactly the same thing, for example:

$("a").click();

Which will "click" all anchors on the page.

Solution 4

element.click() is a standard method outlined by the W3C DOM specification. Mozilla's Gecko/Firefox follows the standard and only allows this method to be called on INPUT elements.

Solution 5

Here's a cross browser working function (usable for other than click handlers too):

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
}

View more solutions

Comments

[Admin]

This question was also answered here.

[lbrndnr]

Understood, but not helpful when I want to programmatically simulate clicks on non-INPUT elements.

[lbrndnr]

interesting, I'll give that a try. This is part of a testing harness, so we don't know ahead of time what specific element we are going to be clicking on - it is whatever the test case specifies.

[James]

You don't need to specify a context; since onclick is a property of 'link' the context will already be set appropriately.

[iirekm]

how does it differe from window.open(element.href, element.target) - at my Firefox it works exactly the same, and displays the ugly yellow bar

[Lessan Vaezi]

I found I needed to use el[etype](); on line 3 to get IE to fire the native event (i was testing with a click handler - see jsfiddle.net/Pc8qE)

[Jacob Mouka]

Just as a note, this work when the href uses onclick, eg <a onclick="someFunction()>Click me</a> but not when using this format <a href="javascript:someFunction()">Click me</a>

[Admin]

To get this to work I had to use a input of type submit for firefox and an input of type button for IE.

[Magne]

If you set the third last parameter of MouseEvent to true (meaning that metaKey (CMD) button was held down when you clicked), this would not open the tab in a background tab, right? Or would it?

[kbpontius]

Excellent solution for Chrome. The code to get the element that then executes dispatchEvent(clickEvent); for me was: var element = document.getElementById("id-tag");

[kbpontius]

This didn't work in Chrome. An error was thrown in the console saying the method "call" didn't exist.

[jiggy]

You must have mistyped. call() is part the Function prototype. It's definitely there.

[Christian]

Works every time, whereas element.click() works not every time and is not reliable, especially on mobile devices.