如何使用JavaScript模拟鼠标点击？
我知道document.form.button.click()方法。 但是，我想知道如何模拟onclick事件。
我发现这里的代码在这里堆栈溢出，但我不知道如何使用它:(
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); }
如何使用JavaScript触发鼠标点击事件？
（修改后的版本，使其工作没有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 }
你可以像这样使用它：
simulate(document.getElementById("btn"), "click");
请注意，作为第三个参数，您可以传入“选项”。 您不指定的选项取自defaultOptions（请参阅脚本的底部）。 所以如果你想要指定鼠标坐标，你可以做一些事情：
simulate(document.getElementById("btn"), "click", { pointerX: 123, pointerY: 321 })
您可以使用类似的方法来覆盖其他默认选项。
积分应该去kangax 。 这是原始来源（prototype.js特定）。
这是一个纯粹的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); }
这是一个工作示例： http : //www.spookandpuff.com/examples/clickSimulation.html
你可以模拟点击DOM中的任何元素。 像一些像simulatedClick(document.getElementById('yourButtonId'))会工作。
您可以将对象传入options以覆盖默认值（模拟所需的鼠标button， Shift / Alt / Ctrl是否被保留等）。它接受的选项基于MouseEvents API 。
我已经在Firefox，Safari和Chrome中testing过。 Internet Explorer可能需要特殊处理，我不确定。
模拟鼠标点击的更简单更标准的方法是直接使用事件构造函数来创build事件并分派它。
虽然保持
MouseEvent.initMouseEvent()方法的向后兼容性，但应该使用MouseEvent()构造函数来创buildMouseEvent对象。
var evt = new MouseEvent("click", { view: window, bubbles: true, cancelable: true, clientX: 20, /* whatever properties you want to give it */ }); targetElement.dispatchEvent(evt);
演示： http : //jsfiddle.net/DerekL/932wyok6/
这适用于所有现代浏览器。 对于包括IE在内的老式浏览器，不幸的是， MouseEvent.initMouseEvent不得不使用，尽pipe它已经被弃用了。
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);
从Mozilla开发者networking（MDN）文档， HTMLElement.click（）是你正在寻找。 你可以在这里find更多的活动。
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代码
<img id="picToClick" data-toggle="modal" data-target="#pdfModal" src="img/Adobe-icon.png" ng-hide="1===1"> <button onclick="showPdf()">Click me</button>
