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 :

Détecter lorsqu'on appuie sur la touche entrée en JQuery
Plugin JQuery Select Box / Drop-Down / Liste déroulante. Un joli select
Problème(ou pas):JQuery ferme automatiquement les balises HTML
Afficher une image différente selon la date de l'année en javascript
Ajouter un masque de saisie dans un champs input text
Connaitre le nombre d'éléments possédant une classe définie
Ajouter / Déplacer dynamiquement un élément dans le DOM avec jQuery
Jquery récupérer les valeurs de checkbox, select et radio
Atteindre une ancre avec JQuery
$("#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