Comment simuler un clic avec JavaScript?


291

Je me demande simplement comment utiliser JavaScript pour simuler un clic sur un élément.

Actuellement, j'ai:

<script type="text/javascript">
function simulateClick(control)
{
    if (document.all)
    {
        control.click();
    }
    else
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        control.dispatchEvent(evObj);
    }
}
</script>

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

Mais ça ne marche pas :(

Des idées?


9
"Cinq erreurs de codage les plus courantes": javascript.about.com/od/hintsandtips/a/worst_4.htm - Presque plus personne n'exécute IE4 et le support du document.all DOM n'est donc plus nécessaire. Il est vraiment surprenant de voir combien de personnes l'utilisent encore dans leur codage. Pire est que la prise en charge du document.tous les DOM sont souvent testés afin de déterminer le navigateur utilisé et s'il est pris en charge, le code suppose que le navigateur est Internet Explorer (ce qui est une utilisation complètement incorrecte car Opera reconnaît également ce DOM) .
2010 à 18h14

Réponses:


418

Voici ce que j'ai préparé. C'est assez simple, mais ça marche:

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

Usage:

eventFire(document.getElementById('mytest1'), 'click');

12
@Anderson Green: J'ai ajouté un exemple à ce jsfiddle: jsfiddle.net/KooiInc/W4BHD
KooiInc

4
Preuve que cela fonctionne (en Chrome): +1 avec document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
PointedEars

58
Eh bien, j'ai essayé votre java-script sur le bouton vote up :) (a fonctionné bien sûr)
0fnt

1
Pour simuler le comportement des utilisateurs précis, vous devez envelopper le dispatchEventou les clickinvocations avec setTimeout, car il semble que dispatchEventest synchrone .
Lev Kazakov

16
Event.initEventest désormais obsolète developer.mozilla.org/en/docs/Web/API/Event/initEvent
artnikpro

392

Qu'en est-il de quelque chose de simple comme:

document.getElementById('elementID').click();

Pris en charge même par IE.


@HermannIngjaldsson Oui, cela fonctionne parfaitement dans IE - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
Darren Sweeney

6
La question était "ça marche aussi c'est-à-dire?" - la réponse est oui - AFAIK au moins à 8, pas vérifié 7
Darren Sweeney

24
Cela n'existait-il pas auparavant? Pourquoi les réponses de 2010 n'ont-elles pas mentionné cette solution simple? Juste curieux ...
Parth

3
@ NinoŠkopac Fonctionne très bien actuellement pour le bureau, mais aucune garantie de travailler avec les navigateurs mobiles. Même le site des développeurs de mozilla n'affiche pas de support mobile.
le0diaz

8
@Parth Peut-être que oui, il n'a tout simplement pas cliqué pour eux.
Andrew

78

Avez-vous envisagé d'utiliser jQuery pour éviter toute détection de navigateur? Avec jQuery, ce serait aussi simple que:

$("#mytest1").click();

21
Cela ne déclenche que les gestionnaires d'événements jQuery, pas le comportement par défaut (le navigateur passe à href dans ce cas)
Romuald Brunet

12
Je ne sais pas ce qui est triste, mais il peut être pratique de ne pas avoir à recoder les mêmes routines de détection de navigateur encore et encore.
BradBrening

9
@ErikAigner: Je me demandais la même chose, mais heureux que la réponse acceptée dans ce cas soit du JavaScript simple et non pas de jQuery. Vu trop de fois sur SO. Encore une fois: jQuery est JavaScript, mais JavaScript n'est pas jQuery. Bien que j'aime utiliser jQuery, je constate de plus en plus que les développeurs ne comprennent pas la vraie réalité. Mes 2 cents, n'ont pas pu résister à commenter. ;)
Sander

58
Il y a aussi beaucoup d'humains qui ne sauraient pas par où commencer s'ils devaient laver leurs vêtements à la main, car la majorité des ménages possèdent une laveuse et presque autant ont un sèche-linge. jQuery, tout comme les appareils modernes, a rendu une ancienne corvée beaucoup plus facile et moins sujette aux erreurs. Ce n'est pas la solution pour tout le monde, cependant, en rétrogradant une réponse qui répond avec précision à la question en utilisant une syntaxe plus concise et compréhensible tout en étant compatible avec tous les navigateurs, semble à l'envers. +1.
FreeAsInBeer

2
@FreeAsInBeer Alors vous ne devriez pas non plus marcher n'importe où, car la conduite est tellement plus facile. Mais nous savons que c'est idiot. Vous marchez si vous n'avez pas besoin d'aller loin. Vous utilisez du JavaScript simple si vous avez besoin de faire quelque chose de simple et que vous ne voulez pas charger une bibliothèque entière pour le faire. Pas besoin de gaspiller du gaz / de la bande passante pour quelque chose de simple.
Jacob Alvarez

18
var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

Référence


Je pense que cela devrait être la meilleure réponse de nos jours
DavidTaubmann

15

Vous pourriez vous épargner un tas d'espace en utilisant jQuery. Il vous suffit d'utiliser:

$('#myElement').trigger("click")

10
OP a demandé JavaScript. Bien que ce soit compact et fonctionnel, certaines personnes préfèrent JS sans bibliothèque à des choses comme jQuery.
Carcass

43
Économisez de l'espace en téléchargeant jquery?
MH

9
Certaines personnes préfèrent également l'assemblage.
Dan Nissenbaum

@MH Je pense qu'un argument plus valable serait "pour faire simple". Votre profil par défaut ici dans SO est à peu près de la même taille que jQuery.
adelriosantiago

7

La meilleure réponse est la meilleure! Cependant, cela ne déclenchait pas d'événements de souris pour moi dans Firefox quand etype = 'click'.

J'ai donc changé le document.createEventen 'MouseEvents'et cela a résolu le problème. Le code supplémentaire consiste à tester si un autre morceau de code interférait ou non avec l'événement, et s'il était annulé, je l'enregistrerais sur la console.

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.