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.
-
1This question was also answered here.– user488071Commented Dec 10, 2010 at 20:45
7 Answers
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.
-
2Excellent solution for Chrome. The code to get the element that then executes
dispatchEvent(clickEvent);
for me was:var element = document.getElementById("id-tag");
Commented Apr 8, 2015 at 3:15 -
1Works every time, whereas element.click() works not every time and is not reliable, especially on mobile devices. Commented Nov 29, 2018 at 8:54
-
2
-
-
3Yes, this one: stackoverflow.com/questions/809057/…. Commented Jun 8, 2023 at 18:03
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;
}
}
-
2how does it differe from window.open(element.href, element.target) - at my Firefox it works exactly the same, and displays the ugly yellow bar– iirekmCommented Dec 6, 2010 at 14:45
-
1If 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?– MagneCommented Apr 23, 2014 at 13:13
Using jQuery you can do exactly the same thing, for example:
$("a").click();
Which will "click" all anchors on the page.
-
20Just 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>
Commented Aug 17, 2011 at 3:29
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.
-
8Understood, but not helpful when I want to programmatically simulate clicks on non-INPUT elements.– BruceCommented Apr 30, 2009 at 21:15
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);
}
}
-
1I 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) Commented Aug 4, 2011 at 6:44 -
1To get this to work I had to use a input of type submit for firefox and an input of type button for IE.– user220583Commented Feb 20, 2013 at 12:14
Are you trying to actually follow the link or trigger the onclick? You can trigger an onclick with something like this:
var link = document.getElementById(linkId);
link.onclick.call(link);
-
1interesting, 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.– BruceCommented Apr 30, 2009 at 21:16
-
3You don't need to specify a context; since onclick is a property of 'link' the context will already be set appropriately.– JamesCommented Apr 30, 2009 at 21:21
-
2This didn't work in Chrome. An error was thrown in the console saying the method "call" didn't exist. Commented Apr 8, 2015 at 3:16
-
1You must have mistyped. call() is part the Function prototype. It's definitely there.– jiggyCommented Apr 8, 2015 at 17:27
I used KooiInc's function listed above but I had to use two different input types one 'button' for IE and one 'submit' for FireFox. I am not exactly sure why but it works.
// HTML
<input type="button" id="btnEmailHidden" style="display:none" />
<input type="submit" id="btnEmailHidden2" style="display:none" />
// in JavaScript
var hiddenBtn = document.getElementById("btnEmailHidden");
if (hiddenBtn.fireEvent) {
hiddenBtn.fireEvent('onclick');
hiddenBtn[eType]();
}
else {
// dispatch for firefox + others
var evObj = document.createEvent('MouseEvent');
evObj.initEvent(eType, true, true);
var hiddenBtn2 = document.getElementById("btnEmailHidden2");
hiddenBtn2.dispatchEvent(evObj);
}
I have search and tried many suggestions but this is what ended up working. If I had some more time I would have liked to investigate why submit works with FF and button with IE but that would be a luxury right now so on to the next problem.