如何使用 JavaScript 模拟鼠标点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6157929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to simulate a mouse click using JavaScript?
提问by Nok Imchen
I know about the document.form.button.click()method. However, I'd like to know how to simulate the onclickevent.
我知道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 触发鼠标单击事件？
回答by TweeZz
(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:
请注意，作为第三个参数，您可以传入 'options'。您未指定的选项取自 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).
回答by Ben Hull
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 optionsto override the defaults (to simulate which mouse button you want, whether Shift/Alt/Ctrlare held, etc. The options it accepts are based on the MouseEvents API.
您可以在一个对象传递到options覆盖默认值（模拟你想要的鼠标键，无论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 可能需要特殊处理，我不确定。
回答by u283863
An easier and more standardway to simulate a mouse click would be directly using the event constructorto 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 theMouseEvent()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.initMouseEventwill 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);
回答by Lewis
From the Mozilla Developer Network (MDN) documentation, HTMLElement.click()is what you're looking for. You can find out more events here.
从 Mozilla 开发人员网络 (MDN) 文档中，HTMLElement.click()就是您要查找的内容。您可以在此处了解更多活动。
回答by Wizek
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.
回答by Guilherme IA
You can use elementFromPoint:
您可以使用elementFromPoint：
document.elementFromPoint(x, y);
supported in all browsers: https://caniuse.com/#feat=element-from-point
所有浏览器均支持：https: //caniuse.com/#feat=element-from-point
回答by BERGUIGA Mohamed Amine
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>
