Comment simuler un clic de souris avec JavaScript?

137

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?

Nok Imchen
la source
3
Qu'essayez-vous de réaliser en agissant ainsi?
Eric
@Nok Imchen - Pourriez-vous fournir un lien vers la question d'origine à partir de laquelle vous avez obtenu le code?
Jared Farrish
@Eric, c'est le même que le lien ci
Nok Imchen
@jared, voici le lien stackoverflow.com/questions/433919/…
Nok Imchen

Réponses:

217

(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).

TweeZz
la source
6
Les crédits devraient aller à kangax, comme indiqué dans ma réponse. Je l'ai rendu
indépendant de la
Comment passer les coordonnées de la souris à ce script?
Dmitry
1
Je vais éditer le message et ajouter un exemple de la façon dont vous pourriez passer les coordonnées de la souris ..
TweeZz
1
J'ai transformé cela en un module CoffeeScript pour une inclusion facile dans vos projets ici: github.com/joscha/eventr
Joscha
1
en quoi est-ce différent de $ (el) .click (), car votre solution fonctionne pour moi, l'option jquery ne le fait pas
Silver Ringvee
54

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.

Ben Hull
la source
Cela a très bien fonctionné pour moi, sur Chrome, où les éléments ne semblent pas avoir l'événement click ().
Howard M. Lewis Ship
C'est génial - sauf type: options.click || 'click'devrait probablement l'être type: options.type || 'click'.
Elliot Winkler
Le problème avec cette solution est qu'elle ne cliquera pas sur les éléments contenus. par exemple. <div id = "outer"><div id = "inner"></div></div> simulatedClick(document.getElementById('outer'));ne cliquera pas sur l'élément intérieur.
dwjohnston
1
Cependant, ce n'est pas ainsi que le bullage d'événements fonctionne - si vous cliquez sur un élément extérieur, ses ancêtres reçoivent l'événement click au fur et à mesure qu'il bouillonne, mais pas ses enfants. Imaginez si votre extérieur divcontenait un bouton ou un lien - vous ne voudriez pas qu'un clic sur l'extérieur déclenche un clic sur l'élément intérieur.
Ben Hull
5
N'utilisez pas l' ||opérateur pour des cas comme celui-ci, car oups, il est canBubble:options.canBubble || true,toujours évalué à vrai maintenant, et apparemment personne ne le remarquera pendant 5 ans.
Winchestro
51

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);
Derek 朕 會 功夫
la source
Cela semble échouer lorsque l'élément A sur lequel je souhaite cliquer a href = "javascript: void (0)" et qu'il répond à un autre gestionnaire de clics qui a été attaché à l'objet.
deejbee
existe-t-il un moyen rapide d'obtenir des événements communs? Je remarque que je peux augmenter le clic facilement sur un bouton, mais n'y a-t-il pas de standard "mouseenter", "mouseleave" evt que je puisse simplement référencer plutôt que de créer un nouvel événement de souris comme ci-dessus?
James Joshua Street
12

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

Lewis
la source
2
@Ercksen Comme le dit la page MDN, il ne déclenche l'événement click de l'élément que lorsqu'il est utilisé avec des éléments qui le supportent (par exemple l'un des types <input>).
Christophe
9

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 .

Wizek
la source
-1

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>
BERGUIGA Mohamed Amine
la source