jquery stop enfant déclencheur événement parent

J’ai un div auquel j’ai attaché un événement onclick . dans cette div il y a une balise avec un lien. Lorsque je clique sur le lien, l’événement onclick de la div est également déclenché. Comment puis-je désactiver cela afin que si le lien est cliqué sur le div onclick n’est pas déclenché?

scénario:

 $(document).ready(function(){ $(".header").bind("click", function(){ $(this).children(".children").toggle(); }); }) 

Code HTML:

 
some link
  • some list

Faites ceci:

 $(document).ready(function(){ $(".header").click(function(){ $(this).children(".children").toggle(); }); $(".header a").click(function(e) { e.stopPropagation(); }); }); 

Si vous voulez en savoir plus sur .stopPropagation (), regardez ici .

Ou plutôt que d’avoir un gestionnaire d’événements supplémentaire pour empêcher un autre gestionnaire, vous pouvez utiliser l’argument d’ object d’événement transmis à votre gestionnaire d’événements click pour déterminer si un enfant a été cliqué. target sera l’élément cliqué et currentTarget sera la div .header:

 $(".header").click(function(e){ //Do nothing if .header was not directly clicked if(e.target !== e.currentTarget) return; $(this).children(".children").toggle(); }); 

Mieux vaut utiliser on () avec chaînage comme,

 $(document).ready(function(){ $(".header").on('click',function(){ $(this).children(".children").toggle(); }).on('click','a',function(e) { e.stopPropagation(); }); }); 

Les réponses ici ont pris la question du PO trop littéralement. Comment ces réponses peuvent-elles être étendues dans un scénario où il existe BEAUCOUP d’éléments enfants, et pas seulement une seule balise ? Voici un moyen.

Disons que vous avez une galerie de photos avec un arrière-plan noirci et les photos centrées dans le navigateur. Lorsque vous cliquez sur l’arrière-plan noir (mais pas quelque chose à l’intérieur), vous voulez que la superposition se ferme.

Voici un HTML possible:

  

Et voici comment JavaScript fonctionnerait:

 $('.gallery').click( function() { $(this).hide(); } ); $('.gallery > .contents').click( function(e) { e.stopPropagation(); } ); 

Cela arrêtera les événements de clic des éléments à l’intérieur de .contents de chaque .contents de recherche afin que la galerie ne se ferme que lorsque vous cliquez dans la zone d’arrière-plan noir, mais pas lorsque vous cliquez dans la zone de contenu. Cela peut être appliqué à de nombreux scénarios différents.

Je suis tombé sur cette question, à la recherche d’une autre réponse.

Je voulais empêcher tous les enfants de déclencher le parent.

C’est la méthode la plus simple et la plus lisible pour cela:

 $(".parent").click(function() { // Do something }).children().on("click", function(e) { e.stopPropagation(); }); 

Ou ca:

 $(document).ready(function(){ $(".header").click(function(){ $(this).children(".children").toggle(); }); $(".header a").click(function(e) { return false; }); }); 

Un moyen plus court de le faire:

 $('.header').on('click', function () { $(this).children('a').on('click', function(e) { e.stopPropagation(); $(this).siblings('.children').toggle(); }); }); 

La solution la plus simple consiste à append ce CSS aux enfants:

 .your-child { pointer-events: none; }