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

 

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.