Come simulare un clic del mouse usando JavaScript?

Conosco il document.form.button.click()metodo. Tuttavia, vorrei sapere come simulare l' onclickevento.

Ho trovato questo codice da qualche parte qui su Stack Overflow, ma non so come 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);
}

Come si attiva un evento clic del mouse utilizzando JavaScript?

(Versione modificata per farlo funzionare senza 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
}

Puoi usarlo in questo modo:

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

Si noti che come terzo parametro è possibile passare in "opzioni". Le opzioni che non specifichi sono prese da defaultOptions (vedi in fondo allo script). Quindi se ad esempio vuoi specificare le coordinate del mouse puoi fare qualcosa del tipo:

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

È possibile utilizzare un approccio simile per sostituire altre opzioni predefinite.

I crediti dovrebbero andare a Kangax . Ecco la fonte originale (specifica prototype.js).

Ecco una pura funzione JavaScript che simulerà un clic (o qualsiasi evento del mouse) su un elemento target:

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

Ecco un esempio funzionante: http://www.spookandpuff.com/examples/clickSimulation.html

È possibile simulare un clic su qualsiasi elemento in DOM . Qualcosa del genere simulatedClick(document.getElementById('yourButtonId'))avrebbe funzionato.

È possibile passare un oggetto in optionsper sovrascrivere le impostazioni predefinite (per simulare il pulsante del mouse desiderato, indipendentemente dal fatto che Shift/ Alt/Ctrl vengono mantenuti, ecc. Le opzioni che accetta si basano sull'API MouseEvents .

Ho testato su Firefox, Safari e Chrome. Internet Explorer potrebbe richiedere un trattamento speciale, non ne sono sicuro.

Un modo più semplice e più standard per simulare un clic del mouse sarebbe utilizzare direttamente il costruttore dell'evento per creare un evento e inviarlo.

Sebbene il MouseEvent.initMouseEvent()metodo sia mantenuto per la compatibilità con le versioni precedenti, la creazione di un oggetto MouseEvent deve essere eseguita utilizzando il MouseEvent()costruttore.

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

Demo: http://jsfiddle.net/DerekL/932wyok6/

Funziona su tutti i browser moderni. Per i vecchi browser, incluso IE, MouseEvent.initMouseEventdovrà essere usato purtroppo anche se è 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);

Dalla documentazione di Mozilla Developer Network (MDN), HTMLElement.click () è ciò che stai cercando. Puoi scoprire altri eventi qui .

Sulla base della risposta di Derek, l'ho verificato

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

funziona come previsto anche con modificatori di tasti. E questa non è un'API deprecata, per quanto posso vedere. Puoi verificare anche su questa pagina .

Puoi usare elementFromPoint :

document.elementFromPoint(x, y);

supportato in tutti i browser: https://caniuse.com/#feat=element-from-point

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

Codice 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>