163

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?

Improve this question
4
  • 3
    What are you trying to achieve by doing so? Commented May 27, 2011 at 21:34
  • @Nok Imchen - Could you provide a link to the original question you got the code from? Commented May 27, 2011 at 21:40
  • @Eric, its the same as the link given below Commented May 27, 2011 at 21:44
  • @jared, here is the link stackoverflow.com/questions/433919/… Commented May 27, 2011 at 21:44

9 Answers 9

Reset to default
239

(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
}

document.getElementById("btn").addEventListener("click", function(e)
{
  console.log("clicked", e.screenX, e.screenY);
});

simulate(document.getElementById("btn"), "click");
simulate(document.getElementById("btn"), "click", { pointerX: 123, pointerY: 321 });
<button id="btn">Click me</button>

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Credits should go to kangax, as noted in my answer. I did make it library agnostic :)
How to pass mouse coordinates to this script?
I will edit the post and add an example of how you could pass in mouse coordinates..
I transformed this into a CoffeeScript module for easy inclusion in your projects here: github.com/joscha/eventr
how is this different from $(el).click(), as your solution works for me, jquery option doesn't
|
76

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);
Improve this answer

3 Comments

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.
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?
Those custom properties won't be accessible in your event-listener.
60

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.

Improve this answer

6 Comments

This worked great for me, on Chrome, where the elements don't seem to have the click() event.
This is great -- except type: options.click || 'click' should probably be type: options.type || 'click'.
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.
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.
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.
|
15

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.

Improve this answer

1 Comment

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

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

Improve this answer

1 Comment

@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).
6

You can use elementFromPoint:

document.elementFromPoint(x, y);

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

Improve this answer

Comments

3

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);

}
Improve this answer

Comments

1

This worked for me in a situation where "everything else failed" in a complex dropdown menu , hope it helps someone else:

// Dispatch mousedown, then mouseup to simulate a full click,
// using absolute x/y coordinates..
function simulateMouseClick(element) {
    if (!element) {
        throw new Error('simulateMouseClick: Provided element is null or undefined.');
    }
    const rect = element.getBoundingClientRect();
    const x = rect.left + (rect.width / 2);
    const y = rect.top + (rect.height / 2);
    const targetWindow = (typeof unsafeWindow === 'undefined') ? window : unsafeWindow;
    const targetElement = document.elementFromPoint(x, y) || element;
    const eventOptions = {
        view: targetWindow,
        bubbles: true,
        cancelable: true,
        clientX: x,
        clientY: y
    };
    ['mousedown', 'mouseup', 'click'].forEach(eventType => {
        targetElement.dispatchEvent(new MouseEvent(eventType, eventOptions));
    });
}

usage:

simulateMouseClick(document.getElementById("btn"));
Improve this answer

Comments

-3

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.