web-dev-qa-db-fra.com

Comment simuler un clic de souris en utilisant JavaScript?

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

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?

javascriptjavascript-events
124
Nok Imchen

(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 indiquer "options". Les options que vous ne spécifiez pas sont tirées de defaultOptions (voir 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 . Ici est la source originale (prototype.js spécifique).

198
TweeZz

Voici une fonction JavaScript pure qui simule un clic (ou un é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 de 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 souhaité, si Shift/Alt/Ctrl sont conservés, etc. Les options acceptées sont basées sur le API MouseEvents .

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

49
Ben Hull

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

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

_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.initMouseEvent devra ê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);
_
40
Derek 朕會功夫

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

11
Lewis

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 des modificateurs de clé. Et ce n'est pas une API obsolète, pour autant que je puisse voir. Vous pouvez vérifiez également sur cette page .

5
Wizek