Skip to main content Accessibility Feedback

How to simulate a click event with vanilla JavaScript

The other day on Twitter, Oliver Williams asked me:

How would I write a vanilla equivalent of jQuery .click() (with no arguments) to trigger a click event even when a real click hasn’t occurred?

If you Google this, you might get excited to discover that vanilla JavaScript has a click() method.

The HTMLElement.click() method simulates a mouse click on an element.

However, that excitement will quickly fade when you discover that it doesn’t work on the thing you’d probably most frequently use it for, links.

However, the click() method will not initiate navigation on an <a> element.

WTF??

Fortunately, there’s a way to get this behavior using the MouseEvent API. Here’s a small little helper method you can use.

/**
 * Simulate a click event.
 * @public
 * @param {Element} elem  the element to simulate a click on
 */
var simulateClick = function (elem) {
    // Create our event (with options)
    var evt = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    // If cancelled, don't dispatch our event
    var canceled = !elem.dispatchEvent(evt);
};

To use it, call the function, passing in the element you want to simulate the click on.

var someLink = document.querySelector('a');
simulateClick(someLink);

This works in IE9 and above.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips