57 votes

Priorité lorsque plusieurs gestionnaires d'événements sont liés à un élément

Lorsque plusieurs gestionnaires d'événements sont liés à un élément, comment détermine-t-on lequel est déclenché en premier?

 <script> 
$(function(){
    $(".li").find('input').click(function(){alert('li>input');});
    $(".li").click(function(){alert('li');});
    $('input').click(function(){alert('input');});
});
</script>
</head>

<body>
<ul>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
</ul>
</body>
 

79voto

DavidLin Points 2883

Je tiens à souligner que la règle "Premier arrivé, premier servi" n'est pas toujours vraie, cela dépend aussi de la façon dont vous enregistrez un gestionnaire:

 Handler1 - $(document).on('click', 'a', function....)
Handler2 - $('a').on('click', function....)
 

Dans l'exemple ci-dessus, le gestionnaire 2 est toujours appelé avant le gestionnaire1.

Jetez un œil à ce violon: http://jsfiddle.net/MFec6/

43voto

jfriend00 Points 152127

Si deux gestionnaires d'événements sont liés à l'exact le même objet, il serait le premier venu, premier servi. le premier attaché exécuté en premier.

Mais, votre exemple est un peu différent. Il semble que vous aussi avez un événement lié à l' input objet et autres à la société mère li objet. Dans ce cas, celui où l'événement provient en fait (sans doute l' input élément dans ce cas) va se produire en premier, puis l'événement fera des bulles à la mère objets et il se fera plus tard.

Si vous souhaitez arrêter la propagation aux parents, vous pouvez utiliser du jQuery event.stopPropagation() et l'événement ne seront pas atteindre les parents et de ne jamais déclencher leurs gestionnaires d'événements. Qui ressemblerait à ceci:

$('input').click(function(e) {
    e.stopPropagation();
    alert('input');
});

Par le jQuery documentation pour stopPropagation(),, il n'arrête pas d'autres gestionnaires d'événements sur le même objet, seuls les gestionnaires d'événements sur les objets parents qui seraient normalement obtenir l'événement via remonter l'arbre-mère.

Vous pouvez voir la différence ici: http://jsfiddle.net/jfriend00/L33aq/

4voto

karim79 Points 178055

Premier arrivé premier servi. Le premier lié sera le premier déclenché, et ainsi de suite ...

En relation: les gestionnaires d'événements jQuery s'exécutent toujours dans l'ordre où ils étaient liés - de toute façon?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X