Comment déclencher un clic sur un événement JavaScript

Question

J'ai un lien hypertexte dans ma page. J'essaie d'automatiser un certain nombre de clics sur l'hyperlien à des fins de test. Existe-t-il un moyen de simuler 50 clics sur le lien hypertexte à l'aide de JavaScript ?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

Je cherche à déclencher l'événement onClick à partir du JavaScript.

Answer 1

Effectuer un simple clic sur un élément HTML : Il suffit de faire element.click() . La plupart des principaux navigateurs prennent en charge cette fonction .

---

Pour répéter le clic plus d'une fois : Ajouter un identifiant à l'élément pour le sélectionner de manière unique :

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

et appeler le .click() dans votre code JavaScript via une boucle for :

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();

Answer 2

Il suffit d'utiliser cliquer . Pour des déclenchements d'événements plus avancés, utilisez dispatchEvent .

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

Réponse originale - Obsolète

Voici ce que j'utilise pour IE9+ http://jsfiddle.net/mendesjuan/rHMCy/4/

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Il convient de noter que l'appel à fireEvent(inputField, 'change'); ne signifie pas qu'il modifiera effectivement le champ de saisie. Le cas typique d'utilisation d'un événement de modification est lorsque vous définissez un champ par programme et que vous souhaitez que les gestionnaires d'événements soient appelés depuis l'appel de la commande input.value="Something" ne déclenchera pas d'événement de changement.

Answer 3

Ce qu'il faut faire

 l.onclick();

est exactement l'appel de la fonction onclick fonction de l c'est-à-dire si vous en avez défini un avec l.onclick = myFunction; . Si vous n'avez pas défini l.onclick il ne fait rien. En revanche,

 l.click();

simule un clic et déclenche tous les gestionnaires d'événements, qu'ils aient été ajoutés à l'aide de la fonction l.addEventHandler('click', myFunction); en HTML ou de toute autre manière.

Answer 4

J'ai honte qu'il y ait autant d'applications partielles incorrectes ou non divulguées.

La manière la plus simple de procéder est d'utiliser Chrome ou Opera (mes exemples utiliseront Chrome) en utilisant la Console. Entrez le code suivant dans la console (généralement en 1 ligne) :

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

Le résultat obtenu est le suivant

Answer 5

.click() ne fonctionne pas avec Android (voir docs mozilla à la section mobile). Cette méthode permet de déclencher l'événement "click" :

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

De ce poste