Is it possible to trigger a link's (or any element's) click event through JavaScript?

Question

I'm writing some JavaScript code that needs to fire the click event for a link. In Internet Explorer I can do this

var button = document.getElementById('myButton');
button.click();

But this doesn't work in Firefox, and I assume any other browser. In Firefox, I've done this

var button = document.getElementById('myButton');
window.location = button.href;

I feel like this is not the best way to do this. Is there a better way to trigger a click event? Preferably something that works regardless of the type of element or the browser.

Answer 1

It's not generally possible, afaik, mozilla has the click() method but for input elements only, not links.

Why don't you just create a function that the button will call on the onClick handler and, whenever you want to 'click' the button call the function instead?

Answer 2

Mozilla has a stricter policy for allowed JS actions/events - I had similar problems with the click() event too. It's disabled on some elements to prevent XSS.

What is wrong with redirecting the browser? This sould work everywhere.

Answer 3

http://jehiah.cz/archive/firing-javascript-events-properly

function fireEvent(element,event) {
   if (document.createEvent) {
       // dispatch for firefox + others
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type,bubbling,cancelable
       return !element.dispatchEvent(evt);
   } else {
       // dispatch for IE
       var evt = document.createEventObject();
       return element.fireEvent('on'+event,evt)
   }
}

Answer 4

I wouldn't recommend it, but you can call the onclick attribute of an HTML element as a method.

<a id="my-link" href="#" onclick="alert('Hello world');">My link</a>

document.getElementById('my-link').onclick();

Answer 5

Hey, I don't mean to dig up an old thread - but I was searching for an answer to this same problem as well, and found a function new to jQuery 1.3x (I was having a problem with Ajax Loaded content)

Here's how I implemented it:

HTML

<a class="navlink" href="mypage.html">Online Estimate</a>

LOADED SCRIPT

$(".pagelink").click(function(){
    $(".navlink[href="+$(this).attr("href")+"]").trigger('click');
    return false;
});

LOADED HTML

<a class="pagelink" href="mypage.html">Online Estimate</a>

The function is the 'Trigger Event'...
More details on it here: http://docs.jquery.com/Events/trigger#eventdata

Answer 6

Chris MacDonald's answer is great except it does not work in the new Safari 4

Answer 7

i was searching for this one quiet desperately and the simplest one seemed to work!

document.getElementById('foo').onclick();

it worked in chrome 7.0.5 and ie 8.0.6