jquery stop niño que desencadena el evento principal

Question

Tengo un div al que he adjuntado un evento onclick. en este div hay una etiqueta con un enlace. Cuando hago clic en el enlace, también se desencadena el evento onclick del div. ¿Cómo puedo desactivar esto para que si se hace clic en el enlace en el div onclick no 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> 

Answer 1

hacer esto:

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

Si desea read more on .stopPropagation(), look here.

Answer 2

O esto:

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

Answer 3

mejor manera mediante el uso de on() con el encadenamiento como,

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

Answer 4

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

Digamos 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 en el interior), desea que se cierre la superposición.

Aquí hay algunas 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 el código JavaScript funcionaría:

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

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

Esto evitará que los eventos de clic de elementos dentro .contents de cada investigación .gallery por lo que la galería se cerrará solo cuando hace clic en el área de fondo negro difuminado, pero no cuando hace clic en el área de contenido. Esto se puede aplicar a muchos escenarios diferentes.

Answer 5

Una forma más corta para hacerlo:

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

Answer 6

O, en lugar de tener un controlador de eventos extra para evitar que otro controlador, puede utilizar el argumento Event Object pasado a su controlador de eventos click para determinar si un niño fue hecho clic. target habrá hecho clic en el elemento y currentTarget será 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(); 
}); 

Answer 7

me encontré con este problema, en busca de otra respuesta.

Quería evitar que todos los niños activen el elemento principal.

Este es el método más fácil, más legible para que:

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