Comment simuler un clic de souris avec JavaScript?

Je connais la document.form.button.click()méthode. Cependant, j'aimerais savoir comment simuler l' onclickévénement.

J'ai trouvé ce code quelque part ici sur Stack Overflow, mais je ne sais pas comment l'utiliser :(

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

Comment déclencher un événement de clic de souris à l'aide de JavaScript?

(Version modifiée pour le faire fonctionner sans 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
}

Vous pouvez l'utiliser comme ceci:

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

Notez qu'en tant que troisième paramètre, vous pouvez passer des «options». Les options que vous ne spécifiez pas sont tirées des options par défaut (voir en bas du script). Donc, si vous voulez par exemple spécifier les coordonnées de la souris, vous pouvez faire quelque chose comme:

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

Vous pouvez utiliser une approche similaire pour remplacer d'autres options par défaut.

Les crédits devraient aller à kangax . Voici la source originale (spécifique à prototype.js).

Voici une fonction JavaScript pure qui simulera un clic (ou tout événement de souris) sur un élément cible:

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

Voici un exemple de travail: http://www.spookandpuff.com/examples/clickSimulation.html

Vous pouvez simuler un clic sur n'importe quel élément du DOM . Quelque chose comme ça simulatedClick(document.getElementById('yourButtonId'))fonctionnerait.

Vous pouvez passer un objet dans optionspour remplacer les valeurs par défaut (pour simuler le bouton de la souris souhaité, si Shift/ Alt/ Ctrlsont maintenus, etc. Les options qu'il accepte sont basées sur l' API MouseEvents .

J'ai testé dans Firefox, Safari et Chrome. Internet Explorer pourrait nécessiter un traitement spécial, je ne suis pas sûr.

Un moyen plus simple et plus standard de simuler un clic de souris serait d'utiliser directement le constructeur d'événement pour créer un événement et le distribuer.

Bien que la MouseEvent.initMouseEvent()méthode soit conservée pour des raisons de compatibilité descendante, la création d'un objet MouseEvent doit être effectuée à l'aide du MouseEvent()constructeur.

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

Démo: http://jsfiddle.net/DerekL/932wyok6/

Cela fonctionne sur tous les navigateurs modernes. Pour les anciens navigateurs, y compris IE, MouseEvent.initMouseEventdevra être utilisé malheureusement bien qu'il soit obsolète.

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

Dans la documentation de Mozilla Developer Network (MDN), HTMLElement.click () est ce que vous recherchez. Vous pouvez découvrir plus d'événements ici .

Sur la base de la réponse de Derek, j'ai vérifié que

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

fonctionne comme prévu même avec les modificateurs de clé. Et ce n'est pas une API obsolète, pour autant que je puisse le voir. Vous pouvez également vérifier sur cette page .

Vous pouvez utiliser elementFromPoint :

document.elementFromPoint(x, y);

pris en charge dans tous les navigateurs: https://caniuse.com/#feat=element-from-point

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

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