¿Cómo simular un clic del mouse usando JavaScript?

Sé sobre el document.form.button.click()método. Sin embargo, me gustaría saber cómo simular el onclickevento.

Encontré este código en algún lugar aquí en Stack Overflow, pero no sé cómo usarlo :(

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

¿Cómo disparo un evento de clic del mouse usando JavaScript?

(Versión modificada para que funcione sin 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
}

Puedes usarlo así:

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

Tenga en cuenta que como tercer parámetro puede pasar 'opciones'. Las opciones que no especifique se toman de las opciones predeterminadas (consulte la parte inferior del script). Entonces, si por ejemplo desea especificar las coordenadas del mouse, puede hacer algo como:

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

Puede usar un enfoque similar para anular otras opciones predeterminadas.

Los créditos deben ir a kangax . Aquí está la fuente original (prototype.js específica).

Aquí hay una función de JavaScript puro que simulará un clic (o cualquier evento del mouse) en un 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);
}

Aquí hay un ejemplo de trabajo: http://www.spookandpuff.com/examples/clickSimulation.html

Puede simular un clic en cualquier elemento del DOM . Algo así simulatedClick(document.getElementById('yourButtonId'))funcionaría.

Puede pasar un objeto optionspara anular los valores predeterminados (para simular qué botón del mouse desea, si se mantiene Shift/ Alt/ Ctrl, etc.) Las opciones que acepta se basan en la API MouseEvents .

He probado en Firefox, Safari y Chrome. Internet Explorer podría necesitar un tratamiento especial, no estoy seguro.

Una forma más sencilla y estándar de simular un clic del mouse sería usar directamente el constructor de eventos para crear un evento y enviarlo.

Aunque el MouseEvent.initMouseEvent()método se mantiene por compatibilidad con versiones anteriores, la creación de un objeto MouseEvent se debe hacer utilizando el 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);

Demostración: http://jsfiddle.net/DerekL/932wyok6/

Esto funciona en todos los navegadores modernos. MouseEvent.initMouseEventDesafortunadamente, para los navegadores antiguos, incluido IE, deberá usarse, aunque está en desuso.

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

De la documentación de Mozilla Developer Network (MDN), HTMLElement.click () es lo que está buscando. Puedes encontrar más eventos aquí .

Basado en la respuesta de Derek, verifiqué que

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

funciona como se espera incluso con modificadores de teclas. Y esto no es una API obsoleta, por lo que puedo ver. También puede verificar en esta página .

Puede usar elementFromPoint :

document.elementFromPoint(x, y);

compatible con todos los navegadores: https://caniuse.com/#feat=element-from-point

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

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