le MEMO du WEB développeur
••• JQuery •••  Liste des Mémos, astuces et bonnes pratiques

StopPropagation() ou Empêcher un évenement de se propager aux parents de l'élément

Utilisation de l'évenement  stopPropagation par l'exemple 

Code HTML :

<div id="div_pere">
  <div class="div_fils"></div>
  <div class="div_fils"></div>
  <div class="div_fils"></div>
</div>

Je voudrais qu'un click sur le père déclenche l'évenement click du premier fils, j'ai donc innocemment  écrit ce bout de code JQuery :

$("#div_pere").click (
     function (){
       alert ('click pere!');
        $(this).children('div:first').click();
     }
   );

si je ne rajoute pas une ligne event.stopPropagation(), j'obtiens une boucle infini de clicks entre le père et le fils, je demande en effet expressement que le click sur le père se propage au fils, mais par défaut un click sur le fils se propagera automatiquement au père, sauf si l'on bloque cette propagation par défaut de l'événement click vers l'élément père grâce au salvateur event.stopPropagation()

$(".div_fils").click (
 function (event){
   alert ('click fils!');
  //mettre ici l'évenement sur le fils
  event.stopPropagation(); 
  //l'événement click n'est plus transmis au père 
 }
);

 

publié le 14/12/2011 par Memo Web
Commentaire :
Salut; svp Comment s'�crira l'ensemble du code;moi je l'ai �crit:
$("#idexist").click (function (){alert ('click pere!');
$(this).children('#idexist a').click();
});
$(".#idexist a").click (function (event){ alert ('click fils!');
event.stopPropagation(); //mettre ici l'�venement sur le fils
//l'�v�nement click n'est plus transmis au p�re
});
par inconnu, le 20/11/2015
Corrigé, merci.
par tarabusk, le 29/05/2013
Sympa l'exemple, mais attention l'id diffère : div_pere d'un côté et div-pere de l'autre.
par inconnu, le 11/02/2013
Commenter le Mémo :

Faire clignoter un élément avec JQuery
Not(expr) Element d'exclusion en Jquery
Siblings() Parcours des frères immédiats d'un élément
Afficher une image différente selon la date de l'année en javascript
Connaitre le nombre d'éléments possédant une classe définie
Savoir si un élément est visible ou hidden
Atteindre une ancre avec JQuery
Modifier l'attribut src d'une image avec JQuery
Sélecteurs RegExp et JQuery
Ajouter un masque de saisie dans un champs input text
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos