jquery stop child que desencadena el evento padre

Tengo un div al que he adjuntado un onclickevento. en este div hay una etiqueta con un enlace. Cuando hago clic en el enlace, onclicktambién se activa el evento desde el div. ¿Cómo puedo desactivar esto para que si se hace clic en el enlace en el div onclickno se active?

guión:

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

código HTML:

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

Hacer esto:

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

Si quieres leer más sobre .stopPropagation (), mira aquí .

O, en lugar de tener un controlador de eventos adicional para evitar otro controlador, puede usar el argumento de objeto de evento pasado a su controlador de eventos de clic para determinar si se hizo clic en un elemento secundario. targetserá el elemento seleccionado y currentTargetserá el div .header:

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

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

Mejor manera usando on () con encadenamiento como,

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

Las respuestas aquí tomaron la pregunta del OP demasiado literalmente. ¿Cómo se pueden expandir estas respuestas en un escenario donde hay MUCHOS elementos secundarios, no solo una <a>etiqueta? Aquí hay una manera.

Supongamos que tiene una galería de fotos con un fondo oscurecido y las fotos centradas en el navegador. Cuando hace clic en el fondo negro (pero no hay nada dentro), desea que se cierre la superposición.

Aquí hay algunos posibles 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>

Y así es como funcionaría el JavaScript:

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

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

Esto detendrá los eventos de clic de elementos dentro .contentsde cada investigación, .gallerypor lo que la galería se cerrará solo cuando haga clic en el área de fondo negro desvanecido, pero no cuando haga clic en el área de contenido. Esto se puede aplicar a muchos escenarios diferentes.

Me topé con esta pregunta, buscando otra respuesta.

Quería evitar que todos los niños activen a los padres.

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 esto:

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

La solución más simple es agregar este CSS a los hijos:

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

Una forma más corta de hacerlo:

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