Comment simuler un clic de souris en utilisant JavaScript ?

Question

Je suis au courant de la document.form.button.click() méthode. Cependant, j'aimerais savoir comment simuler la 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 en utilisant JavaScript ?

Answer 1

(Version modifiée pour que cela fonctionne 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 prises dans les options par défaut (voir le 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 doivent aller à kangax . Aquí C'est la source originale (spécifique au prototype.js).

Answer 2

Une méthode plus facile et plus standard manière de simuler un clic de souris serait d'utiliser directement le constructeur d'événements pour créer un événement et le distribuer.

Bien que le MouseEvent.initMouseEvent() est conservée pour des raisons de rétrocompatibilité, la création d'un objet MouseEvent doit être effectuée à l'aide de la méthode 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émonstration : http://jsfiddle.net/DerekL/932wyok6/

Cela fonctionne sur tous les navigateurs modernes. Pour les anciens navigateurs, y compris IE, MouseEvent.initMouseEvent devra être utilisé malheureusement bien qu'il soit déprécié.

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 3

Voici une fonction JavaScript pure qui simulera un clic (ou tout autre é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 concret : http://www.spookandpuff.com/examples/clickSimulation.html

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

Vous pouvez passer un objet dans options pour remplacer les valeurs par défaut (pour simuler le bouton de la souris que vous voulez, que ce soit le bouton de la souris ou le bouton de l'ordinateur). Shift / Alt / Ctrl sont tenues, etc. Les options qu'il accepte sont basées sur le API MouseEvents .

J'ai fait des tests avec Firefox, Safari et Chrome. Internet Explorer pourrait nécessiter un traitement spécial, je n'en suis pas sûr.

Answer 4

D'après 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 des modificateurs de clés. Et ce n'est pas une API dépréciée, pour autant que je puisse le voir. Vous pouvez vérifier sur cette page également .

Answer 5

Extrait de la documentation du Mozilla Developer Network (MDN), HTMLElement.click() est ce que vous recherchez. Vous pouvez découvrir d'autres événements aquí .