examples - jquery stop niño desencadenando evento principal

jquery pdf

Question

Tengo un div al cual onclick 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 vínculo, no se active el clic div?

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 quieres leer más sobre .stopPropagation (), mira aquí .

Answer 2

La solución más simple es agregar este CSS a los niños:

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

Answer 3

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

Digamos que tienes 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 un posible 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 los elementos dentro de .contents de cada .gallery investigación para que la galería se cierre solo cuando haga clic en el área de fondo negro difuminado, pero no cuando haga clic en el área de contenido. Esto se puede aplicar a muchos escenarios diferentes.

Answer 4

Me encontré con esta pregunta, buscando otra respuesta.

Quería evitar que todos los niños activaran al padre.

Este es el método más fácil y más fácil de leer para eso:

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

Answer 5

Mejor forma al usar on() con encadenamiento como,

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

Answer 6

O bien, en lugar de tener un controlador de eventos adicional para evitar otro controlador, puede usar el argumento del objeto de evento pasado a su controlador de evento click para determinar si se hizo clic en un niño. target será el elemento cliqueado y currentTarget será .header div:

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

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

Answer 7

O esto:

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

Answer 8

Una forma más corta de hacerlo:

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