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

simular href javascript

Question

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

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?

Answer 1

(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 en ''opciones''. Las opciones que no especifica se toman de las opciones predeterminadas (ver 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 usar un enfoque similar para anular otras opciones predeterminadas.

Los créditos deberían ir a kangax . Here está la fuente original (prototype.js específico).

Answer 2

Aquí hay una función de JavaScript pura que simulará un clic (o cualquier evento de 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 en el DOM . Algo como simulatedClick(document.getElementById(''yourButtonId'')) funcionaría.

Puede pasar un objeto a las options para anular los valores predeterminados (para simular qué botón del mouse desea, si se mantienen presionadas las teclas Mayús / Alt / Ctrl , etc. Las opciones que acepta se basan en la API de MouseEvents .

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

Answer 3

Basado en la respuesta de Derek, verifiqué que

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

funciona como se espera, incluso con modificadores clave. Y esta no es una API obsoleta, por lo que puedo ver. Usted puede http://www.spookandpuff.com/examples/clickSimulation.html .

Answer 4

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

Answer 5

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

Aunque el método MouseEvent.initMouseEvent() se mantiene para la compatibilidad con versiones anteriores, la creación de un objeto MouseEvent se debe hacer utilizando el constructor MouseEvent() .

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

Answer 6

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>