How to simulate a mouse click using JavaScript?

Question

I know about the document.form.button.click() method. However, I'd like to know how to simulate the onclick event.

I found this code somewhere here on Stack Overflow, but I don't know how to use it :(

function contextMenuClick()
{
  var element= 'button';
  var evt = element.ownerDocument.createEvent('MouseEvents');

  evt.initMouseEvent('contextmenu', true, true, element.ownerDocument.defaultView,
                     1, 0, 0, 0, 0, false, false, false, false, 1, null);

  element.dispatchEvent(evt);
}

How do I fire a mouse click event using JavaScript?

Horribly

What are you trying to achieve by doing so? – Imperator

@Nok Imchen - Could you provide a link to the original question you got the code from? – Sonora

@Eric, its the same as the link given below – Horribly

@jared, here is the link #434419 – Horribly

Answer 1

(Modified version to make it work without prototype.js)

function simulate(element, eventName)
{
    var options = extend(defaultOptions, arguments[2] || {});
    var oEvent, eventType = null;

    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { eventType = name; break; }
    }

    if (!eventType)
        throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

    if (document.createEvent)
    {
        oEvent = document.createEvent(eventType);
        if (eventType == 'HTMLEvents')
        {
            oEvent.initEvent(eventName, options.bubbles, options.cancelable);
        }
        else
        {
            oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
            options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
            options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        options.clientX = options.pointerX;
        options.clientY = options.pointerY;
        var evt = document.createEventObject();
        oEvent = extend(evt, options);
        element.fireEvent('on' + eventName, oEvent);
    }
    return element;
}

function extend(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;
}

var eventMatchers = {
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
    'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
    pointerX: 0,
    pointerY: 0,
    button: 0,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    bubbles: true,
    cancelable: true
}

You can use it like this:

simulate(document.getElementById("btn"), "click");

Note that as a third parameter you can pass in 'options'. The options you don't specify are taken from the defaultOptions (see bottom of the script). So if you for example want to specify mouse coordinates you can do something like:

simulate(document.getElementById("btn"), "click", { pointerX: 123, pointerY: 321 })

You can use a similar approach to override other default options.

Credits should go to kangax. Here's the original source (prototype.js specific).

Coth

Credits should go to kangax, as noted in my answer. I did make it library agnostic :) – Coth

How to pass mouse coordinates to this script? – Oldtime

I will edit the post and add an example of how you could pass in mouse coordinates.. – Coth

@Coth I was trying to use this function to click a link that normally opens a modal view (I'm using twitter bootstrap). Unfortunately, however, the function does not open the modal, but instead it redirects to a new page having as content the modal view. Is it possibile to make it work with modal windows (the link looks like this: <a id="link-3-3" class="hide" href="/view.php?Id=582" data-toggle="modal"></a>)? – Larder

I transformed this into a CoffeeScript module for easy inclusion in your projects here: github.com/joscha/eventr – Organizer

note: this code sets the relatedTarget attribute of the event to always be the input element, which may cause some subtle bugs if you're simulating mouseover and mouseout events – Clothesbasket

@Coth Does this work for keyDown ? I need to simulate a keypress and other keyboard events. do you any other code that does this for me ? – Visualize

No, it doesn't work for key events. Only html events and mouse events are handled. – Coth

Hmm, can anyone confirm it does not work for IE9 and lower? – Coth

how is this different from $(el).click(), as your solution works for me, jquery option doesn't – Delhi

@Coth How click on object from d3.js e.g.circle and to simulate click on coordinates(100,100) and then drag it to (200,200); and then release on (200,200) point? – Cineaste

This was fantastic. I was using a code snippet I found online which set the event type to 'Events' instead of 'MouseEvents' and couldn't figure out why React wouldn't see the event. jQuery's .click() and .trigger('click') didn't work either. It's been years since I did real JS work (I'm mostly a C++ guy) and I spent hours on this problem before finding this post. This worked. Thanks! – Mugwump

My refactored version – Subterrane

Answer 2

An easier and more standard way to simulate a mouse click would be directly using the event constructor to create an event and dispatch it.

Though the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent() constructor.

var evt = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: 20,
    /* whatever properties you want to give it */
});
targetElement.dispatchEvent(evt);

Demo: http://jsfiddle.net/DerekL/932wyok6/

This works on all modern browsers. For old browsers including IE, MouseEvent.initMouseEvent will have to be used unfortunately though it's deprecated.

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", canBubble, cancelable, view,
                   detail, screenX, screenY, clientX, clientY,
                   ctrlKey, altKey, shiftKey, metaKey,
                   button, relatedTarget);
targetElement.dispatchEvent(evt);

Ithnan

This seems to fail when the A element that I want to be clicked has href="javascript:void(0)" and it responds to another click handler that has been attached to the object. – Ouabain

is there a quick way to get common events? I notice I can raise click easily on a button, but is there no standard "mouseenter", "mouseleave" evt that I can just reference rather than creating a new mouseevent like done above? – Hen

Those custom properties won't be accessible in your event-listener. – Giggle

Answer 3

Here's a pure JavaScript function which will simulate a click (or any mouse event) on a target element:

function simulatedClick(target, options) {

  var event = target.ownerDocument.createEvent('MouseEvents'),
      options = options || {},
      opts = { // These are the default values, set up for un-modified left clicks
        type: 'click',
        canBubble: true,
        cancelable: true,
        view: target.ownerDocument.defaultView,
        detail: 1,
        screenX: 0, //The coordinates within the entire page
        screenY: 0,
        clientX: 0, //The coordinates within the viewport
        clientY: 0,
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
        button: 0, //0 = left, 1 = middle, 2 = right
        relatedTarget: null,
      };

  //Merge the options with the defaults
  for (var key in options) {
    if (options.hasOwnProperty(key)) {
      opts[key] = options[key];
    }
  }

  //Pass in the options
  event.initMouseEvent(
      opts.type,
      opts.canBubble,
      opts.cancelable,
      opts.view,
      opts.detail,
      opts.screenX,
      opts.screenY,
      opts.clientX,
      opts.clientY,
      opts.ctrlKey,
      opts.altKey,
      opts.shiftKey,
      opts.metaKey,
      opts.button,
      opts.relatedTarget
  );

  //Fire the event
  target.dispatchEvent(event);
}

Here's a working example: http://www.spookandpuff.com/examples/clickSimulation.html

You can simulate a click on any element in the DOM. Something like simulatedClick(document.getElementById('yourButtonId')) would work.

You can pass in an object into options to override the defaults (to simulate which mouse button you want, whether Shift/Alt/Ctrl are held, etc. The options it accepts are based on the MouseEvents API.

I've tested in Firefox, Safari and Chrome. Internet Explorer might need special treatment, I'm not sure.

Krishnakrishnah

This worked great for me, on Chrome, where the elements don't seem to have the click() event. – Caption

This is great -- except type: options.click || 'click' should probably be type: options.type || 'click'. – Meany

The problem with this solution is it won't click contained elements. eg. <div id = "outer"><div id = "inner"></div></div> simulatedClick(document.getElementById('outer')); won't click the inner element. – Rabinowitz

That's not how event bubbling works, though - if you click an outer element, it's ancestors receive the click event as it bubbles up, but its children don't. Imagine if your outer div contained a button or a link - you wouldn't want a click on the outer to trigger a click on the inner element. – Krishnakrishnah

Don't use the || operator for cases like this, because whoops, canBubble:options.canBubble || true, always evaluates to true now, and apparently no one will notice it for 5 years. – Annals

Thank you! It seems it is necessary to use the exact number of parameters if you want to simulate a mouse event with the "Shift" or "Control" keys. Some other people suggested it the following way, but it won't work: event.initMouseEvent('mousewheel', {shiftKey: true}) It only works the way you suggested: event.initMouseEvent('mousewheel', true, true,window,0,0,0,0,0,0,0,true ) – Coif

Answer 4

Based on Derek's answer, I verified that

document.getElementById('testTarget')
  .dispatchEvent(new MouseEvent('click', {shiftKey: true}))

works as expected even with key modifiers. And this is not a deprecated API, as far as I can see. You can verify on this page as well.

Hostel

I encountered a situation where the click() function or trigger("click") in jQuery did not work, but the dispatchEvent() function worked well. Impressive! – Garofalo

Answer 5

From the Mozilla Developer Network (MDN) documentation, HTMLElement.click() is what you're looking for. You can find out more events here.

Humboldt

@Ercksen As the MDN page says, it only fires the element's click event when used with elements that support it (e.g. one of the <input> types). – Josephus

Answer 6

You can use elementFromPoint:

document.elementFromPoint(x, y);

supported in all browsers: https://caniuse.com/#feat=element-from-point

Rectifier

Answer 7

Don't rely on deprecated API features. All browsers support the example below. See docs and example here

if (document.createEvent) {

    // Create a synthetic click MouseEvent
    let event = new MouseEvent("click", {
     bubbles: true,
     cancelable: true,
     view: window
    });

    // Dispatch the event.
    link.dispatchEvent(event);

}

Washin

Answer 8

JavaScript Code

   //this function is used to fire click event
    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);
      }
    }

function showPdf(){
  eventFire(document.getElementById('picToClick'), 'click');
}

HTML Code

<img id="picToClick" data-toggle="modal" data-target="#pdfModal" src="img/Adobe-icon.png" ng-hide="1===1">
  <button onclick="showPdf()">Click me</button>

Coalesce