jquery stop figlio che attiva l'evento genitore

Question

Ho un div a cui ho allegato un evento onclick. in questo div c'è un tag con un link. Quando clicco sul link viene attivato anche l'evento onclick dal div. Come posso disabilitare questo in modo che se il collegamento è cliccato sul div onclick non viene licenziato?

script:

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

codice html:

<div class="header"> 
    <a href="link.html">some link</a> 
    <ul class="children"> 
     <li>some list</li> 
    </ul> 
</div> 

Answer 1

fare questo:

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

Se si desidera read more on .stopPropagation(), look here.

Answer 2

O questo:

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

Answer 3

Modo migliore utilizzando on() con il concatenamento come,

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

Answer 4

Le risposte qui presero domanda del PO troppo alla lettera. In che modo queste risposte possono essere espanse in uno scenario in cui ci sono MOLTI elementi figlio, non solo un singolo tag <a>? Ecco un modo.

Supponiamo di avere una galleria fotografica con uno sfondo oscurato e le foto centrate nel browser. Quando fai clic sullo sfondo nero (ma non all'interno di esso), vuoi che la sovrapposizione si chiuda.

Ecco qualche possibile HTML:

<div class="gallery" style="background: black"> 
    <div class="contents"> <!-- Let's say this div is 50% wide and centered --> 
     <h1>Awesome Photos</h1> 
     <img src="img1.jpg"><br> 
     <img src="img2.jpg"><br> 
     <img src="img3.jpg"><br> 
     <img src="img4.jpg"><br> 
     <img src="img5.jpg"> 
    </div> 
</div> 

Ed ecco come dovrebbe funzionare il JavaScript:

$('.gallery').click(
    function() 
    { 
     $(this).hide(); 
    } 
); 

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

Questo fermerà gli eventi click da elementi all'interno .contents da ogni ricerca .gallery così la galleria chiuderà solo quando si fa clic nell'area dello sfondo nero sbiadito, ma non quando si fa clic nell'area dei contenuti. Questo può essere applicato a molti scenari diversi.

Answer 5

Un più breve modo per farlo:

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

Answer 6

O, piuttosto che avere un gestore eventi in più per evitare che un altro gestore, è possibile utilizzare l'argomento Event Object passato al gestore di eventi click per determinare se un bambino è stato cliccato target sarà l'elemento cliccato e currentTarget sarà il div .header:

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

    $(this).children(".children").toggle(); 
}); 

Answer 7

mi sono imbattuto su questa domanda, alla ricerca di un'altra risposta.

Volevo impedire a tutti i bambini di attivare il genitore.

Questo è il più facile, metodo più leggibile per questo:

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