web-dev-qa-db-fra.com

Comment puis-je cliquer par programme sur un élément en JavaScript?

Dans IE, je peux simplement appeler element.click () à partir de JavaScript - comment puis-je accomplir la même tâche dans Firefox? Idéalement, j'aimerais avoir du JavaScript qui fonctionnerait tout aussi bien entre les navigateurs, mais si nécessaire, j'aurai un JavaScript différent par navigateur pour cela.

javascriptfirefoxdomjavascript-eventsdhtml
57
Bruce

Le document.createEvent documentation dit que " La méthode createEvent est déconseillée. Utilisez plutôt constructeurs d'événements . "

Vous devez donc utiliser cette méthode à la place:

var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

et le tirer sur un élément comme celui-ci:

element.dispatchEvent(clickEvent);

comme indiqué ici .

69
Iulian Onofrei

Pour Firefox, les liens semblent "spéciaux". La seule façon dont j'ai pu faire fonctionner cela était d'utiliser le createEvent décrit ici sur MDN et d'appeler la fonction initMouseEvent. Même cela ne fonctionnait pas complètement, j'ai dû dire manuellement au navigateur d'ouvrir un lien ...

var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);

while (element)
{
    if (element.tagName == "A" && element.href != "")
    {
        if (element.target == "_blank") { window.open(element.href, element.target); }
        else { document.location = element.href; }
        element = null;
    }
    else
    {
        element = element.parentElement;
    }
}
30
will

En utilisant jQuery vous pouvez faire exactement la même chose, par exemple:

$("a").click();

Qui "cliquera" sur toutes les ancres de la page.

22
Jake McGraw

element.click () est une méthode standard décrite par la spécification DOM W3C . Gecko/Firefox de Mozilla suit la norme et ne permet d'appeler cette méthode que sur les éléments INPUT.

10
Bjorn Tipling

Essayez-vous réellement de suivre le lien ou de déclencher le onclick? Vous pouvez déclencher un onclick avec quelque chose comme ceci:

var link = document.getElementById(linkId);
link.onclick.call(link);
8
jiggy

Voici une fonction de travail multi-navigateur (utilisable pour d'autres que les gestionnaires de clics):

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

J'ai utilisé la fonction de KooiInc répertoriée ci-dessus, mais j'ai dû utiliser deux types d'entrée différents: un "bouton" pour IE et un "soumettre" pour FireFox. Je ne sais pas exactement pourquoi mais cela fonctionne.

// HTML

<input type="button" id="btnEmailHidden" style="display:none" />
<input type="submit" id="btnEmailHidden2" style="display:none" />

// en JavaScript

var hiddenBtn = document.getElementById("btnEmailHidden");

if (hiddenBtn.fireEvent) {
    hiddenBtn.fireEvent('onclick');
    hiddenBtn[eType]();
}
else {
    // dispatch for firefox + others
    var evObj = document.createEvent('MouseEvent');
    evObj.initEvent(eType, true, true);
    var hiddenBtn2 = document.getElementById("btnEmailHidden2");
    hiddenBtn2.dispatchEvent(evObj);
}

J'ai cherché et essayé de nombreuses suggestions, mais c'est ce qui a fini par fonctionner. Si j'avais un peu plus de temps, j'aurais aimé chercher pourquoi soumettre fonctionne avec FF et bouton avec IE mais ce serait un luxe en ce moment et ainsi de suite jusqu'au prochain problème.

1
krm