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

Te sugerimos que revises esta respuesta en un ambiente controlado antes de enviarlo a producción, un saludo.

Solución:

(Versión modificada para que funcione sin prototipo.js)

function simulate(element, eventName)

    var options = extend(defaultOptions, arguments[2] 

function extend(destination, source) 
    for (var property in source)
      destination[property] = source[property];
    return destination;


var eventMatchers = reset
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 especifica se toman de las opciones predeterminadas (vea la parte inferior de la secuencia de comandos). Entonces, si, por ejemplo, desea especificar las coordenadas del mouse, puede hacer algo como:

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

Puede utilizar un enfoque similar para anular otras opciones predeterminadas.

Los créditos deben ir a Kangax. Aquí está la fuente original (específico de prototipo.js).

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() El método se mantiene para la compatibilidad con versiones anteriores, la creación de un objeto MouseEvent debe realizarse 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. Para navegadores antiguos, incluido IE, MouseEvent.initMouseEvent tendrá que ser usado desafortunadamente 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);

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)  ,
      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 como simulatedClick(document.getElementById('yourButtonId')) trabajaría.

Puede pasar un objeto a options para anular los valores predeterminados (para simular qué botón del mouse desea, ya sea Cambio/alternativa/Control se retienen, etc. Las opciones que acepta se basan en la API de MouseEvents.

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

Reseñas y puntuaciones del tutorial

Finalizando este artículo puedes encontrar las aclaraciones de otros programadores, tú igualmente tienes el poder insertar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador