jquery interrompe figlio attivando l'evento genitore

Ho un div a cui ho allegato un onclickevento. in questo div c'è un tag con un link. Quando faccio clic sul collegamento, onclickviene attivato anche l' evento dal div. Come posso disabilitarlo in modo tale che se il link viene cliccato sul div onclicknon viene attivato?

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>

Fai questo:

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

Se vuoi leggere di più su .stopPropagation (), guarda qui .

Oppure, anziché disporre di un gestore eventi aggiuntivo per impedire un altro gestore, è possibile utilizzare l' argomento Event Event passato al gestore eventi click per determinare se è stato fatto clic su un figlio. targetsarà l'elemento cliccato e currentTargetsarà 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();
});

Modo migliore usando on () con concatenamento come,

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

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

Supponiamo che tu abbia una galleria fotografica con uno sfondo oscurato e le foto centrate nel browser. Quando fai clic sullo sfondo nero (ma non al suo interno), vuoi che l'overlay si chiuda.

Ecco alcuni possibili 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 funzionerebbe JavaScript:

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

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

Ciò interromperà gli eventi di clic dagli elementi all'interno .contentsdi ogni ricerca in .gallerymodo che la galleria si chiuda solo quando si fa clic nell'area di sfondo nero sbiadito, ma non quando si fa clic nell'area del contenuto. Questo può essere applicato a molti scenari diversi.

Mi sono imbattuto in questa domanda, cercando un'altra risposta.

Volevo impedire a tutti i bambini di innescare il genitore.

JavaScript:

document.getElementById("parent").addEventListener("click",  function (e) {
    if (this !== event.target) return;
    // Do something
});

jQuery:

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

O questo:

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

La soluzione più semplice è aggiungere questo CSS ai bambini:

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

Un modo più breve per farlo:

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