如何使用JavaScript模拟鼠标点击？

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

我知道document.form.button.click（）方法。但是，我想知道如何模拟onclick事件。

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

我在Stack Overflow上找到了这个代码，但我不知道如何使用它:(

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?

如何使用JavaScript触发鼠标单击事件？

6 个解决方案

#1

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

（修改后的版本使其无需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:

请注意，作为第三个参数，您可以传入“选项”。您未指定的选项取自defaultOptions（请参阅脚本底部）。因此，如果您想要指定鼠标坐标，您可以执行以下操作：

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

积分应该去kangax。这是原始源（prototype.js特定）。

#2

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

这是一个纯JavaScript函数，它将模拟目标元素上的单击（或任何鼠标事件）：

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

这是一个工作示例：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.

您可以模拟DOM中任何元素的单击。像simulatedClick（document.getElementById（'yourButtonId'））之类的东西会起作用。

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.

您可以将对象传入选项以覆盖默认值（模拟所需的鼠标按钮，是否保留Shift / Alt / Ctrl等等。它接受的选项基于MouseEvents API。

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

我已经在Firefox，Safari和Chrome中进行了测试。 Internet Explorer可能需要特殊处理，我不确定。

#3

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.

虽然保留MouseEvent.initMouseEvent（）方法是为了向后兼容，但是应该使用MouseEvent（）构造函数创建MouseEvent对象。

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/

演示：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.

这适用于所有现代浏览器。对于包括IE在内的旧浏览器，不幸的是必须使用MouseEvent.initMouseEvent，尽管它已被弃用。

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

#4

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

从Mozilla Developer Network（MDN）文档中，您正在寻找HTMLElement.click（）。你可以在这里找到更多活动。

#5

Based on Derek's answer, I verified that

根据Derek的回答，我验证了这一点

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.

即使使用键修饰符也能按预期工作。据我所知，这不是一个弃用的API。您也可以在此页面上进行验证。

#6

JavaScript Code

JavaScript代码

   //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

HTML代码

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