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 :

Problème(ou pas):JQuery ferme automatiquement les balises HTML
Récupérer le contenu ou afficher du texte dans un textarea en JQuery
Empêcher de coller du texte dans un champs input de type text
Savoir si un élément est visible ou hidden
Détecter lorsqu'on appuie sur la touche entrée en JQuery
Rajouter un élément dans le DOM
Ajouter un masque de saisie dans un champs input text
JQuery - Queue() : Attendre qu'une animation se termine avant de commencer la suivante
Charger JQuery directement via les librairies google
$("#calendar").fullCalendar is not a function
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