Como simular um clique do mouse usando JavaScript?

Eu sei sobre o método document.form.button.click() . No entanto, gostaria de saber como simular o evento onclick.

Eu encontrei este código em algum lugar aqui no Stack Overflow, mas eu não sei como usá-lo 🙁

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

Como faço para triggersr um evento de clique do mouse usando JavaScript?

(Versão modificada para que funcione sem 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 } 

Você pode usá-lo assim:

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

Note que como um terceiro parâmetro você pode passar em ‘opções’. As opções que você não especifica são tiradas das defaultOptions (veja a parte inferior do script). Então, se você quiser, por exemplo, especificar as coordenadas do mouse, você pode fazer algo como:

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

Você pode usar uma abordagem semelhante para replace outras opções padrão.

Créditos devem ir para kangax . Aqui está a fonte original (prototype.js específico).

Aqui está uma function JavaScript pura que simulará um clique (ou qualquer evento de mouse) em um elemento de destino:

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

Aqui está um exemplo prático : http://www.spookandpuff.com/examples/clickSimulation.html

Você pode simular um clique em qualquer elemento no DOM . Algo como simulatedClick(document.getElementById('yourButtonId')) funcionaria.

Você pode passar um object em options para replace os padrões (para simular qual botão do mouse você deseja, se a tecla Shift / Alt / Ctrl é pressionada , etc. As opções aceitas são baseadas na API MouseEvents .

Eu testei no Firefox, Safari e Chrome. O Internet Explorer pode precisar de tratamento especial, não tenho certeza.

Uma maneira mais fácil e padronizada de simular um clique do mouse seria usar diretamente o construtor de events para criar um evento e despachá-lo.

Embora o método MouseEvent.initMouseEvent() seja mantido para compatibilidade com versões anteriores, a criação de um object MouseEvent deve ser feita usando o construtor MouseEvent() .

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

Demonstração: http://jsfiddle.net/DerekL/932wyok6/

Isso funciona em todos os navegadores modernos. Para navegadores antigos, incluindo o IE, o MouseEvent.initMouseEvent terá que ser usado, infelizmente, embora esteja obsoleto.

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

A partir da documentação do Mozilla Developer Network (MDN), HTMLElement.click () é o que você está procurando. Você pode descobrir mais events aqui .

Com base na resposta de Derek, verifiquei que

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

funciona como esperado, mesmo com modificadores de chave. E isso não é uma API obsoleta, até onde eu posso ver. Você pode verificar nesta página também .

Código 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'); } 

Código HTML