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:
Awesome Photos
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; }