jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Trucs et astuces > Comment éviter la propagation des événements

Comment éviter la propagation des événements

vendredi 10 août 2007, par cam.lafit

Comment contrôler la propagation des évenements avec la fonction stopPropagation() et return false


Objectif

Lorsque vous déclarez un évènement celui ci est propagé à l’ensemble des éléments correspondants aux critères de sélection ; ainsi si on déclare un évènements click sur $("#id") seule la balise ayant l’identifiant "id" sera concernée. Tandis que si on déclare $("li"), toutes les balises de type <li> seront affectées par l’évènement.

Si les balises sont imbriquées comme ceci ul > li > ul > li (cas typique d’un menu arborescent), le script va s’exécuter sur tous les éléments de type <li> imbriqués, c’est ce qu’on nomme la propagation d’évènement.

Dans certains cas cette propagation peut se révéler gênante.

Comprendre de quoi on parle

Voici un exemple pour mieux appréhender ce comportement de propagation.

HTML

<ul>
 <li> Niveau 1 : item 1
   <ul>
     <li> Niveau 2 : item 1</li>
     <li> Niveau 2 : item 2</li>
     <li> Niveau 2 : item 3
       <ul>
         <li> Niveau 3 : item 1</li>
         <li> Niveau 3 : item 2</li>
       </ul>
     </li>
   </ul>
 </li>
</ul>

jquery

 $(document).ready(function () {
   var noeud = ;
   $("li").click(function () {
     alert($(this).html());
   });
 });

Si on clique sur Niveau 1 : item 1, on obtient logiquement ceci :

Niveau 1 : item 1
   <ul>
     <li> Niveau 2 : item 1</li>
     <li> Niveau 2 : item 2</li>
     <li> Niveau 2 : item 3
       <ul>
         <li> Niveau 3 : item 1</li>
         <li> Niveau 3 : item 2</li>
       </ul>
     </li>
   </ul>

Mais si on clique sur Niveau 3 : item 2, on obtient 3 message succesifs, d’abord :

Niveau 3 : item 2

Puis ceci :

Niveau 2 : item 3
       <ul>
         <li> Niveau 3 : item 1</li>
         <li> Niveau 3 : item 2</li>
       </ul>

Et enfin :

Niveau 1 : item 1
   <ul>
     <li> Niveau 2 : item 1</li>
     <li> Niveau 2 : item 2</li>
     <li> Niveau 2 : item 3
       <ul>
         <li> Niveau 3 : item 1</li>
         <li> Niveau 3 : item 2</li>
       </ul>
     </li>
   </ul>

Ce comportement est des plus logique. Nous capturons l’évènement click d’une balise <li>. Or celles ci sont imbriquées, ainsi chaque <li>concernée retourne son contenu. La propagation est ascendante, les évènements commence par l’élément fils et remonte de parent en parent.

Bloquer la propagation

Dans certains cas, cette propagation peut être gênante. Nous pouvons imaginer un cas de menu dépliant (voir du coté de spip-contrib, pour un exemple complet).

Pour bloquer cette propagation, nous pouvons utiliser 2 options de jquery, la gestion d’évènement et le return false.

Gestion d’évènement

Il semblerait que cette solution soit moins recommandée mais elle est intéressante à connaître, au moins pour savoir qu’il existe une gestion d’évènement.

Pour ceci il faut modifier le script :

 $(document).ready(function () {
   $("li").click(function (e) {
     alert($(this).html());
     e.stopPropagation();
   });
 });

Maintenant quel que soit l’item sélectionné, un seul alert est exécuté. Dans ce cas e.stopPropagation(); peut être positionné n’importe où dans la fonction.

Return false

Il existe une autre solution.

 $(document).ready(function () {
   $("li").click(function () {
     alert($(this).html());
     return false;
   });
 });

Lors d’un click sur un item, seul son contenu est retourné. Il faut faire attention à bien mettre le return false en fin de fonction. Autrement les action déclarée après le return ne seront pas traitées.

Effet de bord

Le return false stoppe la propagation et annule l’action en cours. Du coup on obtient certaines erreurs. Si par exemple le <li> contient une ancre <a>, l’ouverture du lien peut être annulée. Le javascript va être éxécuté avant les actions normales du navigateur.

Conclusion

Arrêter la propagation d’un évènements est intéressant. Toutefois il faut le faire en connaissance de cause.

Répondre à cet article

3 Messages de forum


Derniers commentaires