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.user488071– user4880712010-12-10 20:45:50 +00:00Commented Dec 10, 2010 at 20:45
Add a comment
|
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.
5 Comments
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");
Christian
Works every time, whereas element.click() works not every time and is not reliable, especially on mobile devices.
Cybernetic
does not work for dynamically added elements
Iulian Onofrei
Yes, this one: stackoverflow.com/questions/809057/….
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;
}
}
2 Comments
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
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?
Using jQuery you can do exactly the same thing, for example:
$("a").click();
Which will "click" all anchors on the page.
1 Comment
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>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.
1 Comment
Bruce
Understood, but not helpful when I want to programmatically simulate clicks on non-INPUT elements.
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);
}
}
2 Comments
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)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);
4 Comments
Bruce
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.
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.
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.
