jquery parar filho provocando evento pai



(8)

Eu tenho um div que eu tenho anexado um evento onclick para. Neste div existe uma tag com um link. Quando clico no link, o evento onclick do div também é acionado. Como posso desabilitar isso para que, se o link for clicado no div onclick não seja disparado?

roteiro:

$(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>

Answers

Um jeito mais curto de fazer isso:

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

Faça isso:

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

Se você quiser ler mais sobre .stopPropagation (), veja aqui .


Ou isto:

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

A solução mais simples é adicionar esse CSS aos filhos:

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

Ou, em vez de ter um manipulador de eventos extra para impedir outro manipulador, você pode usar o argumento de objeto de evento passado ao manipulador de eventos de clique para determinar se uma criança foi clicada. target será o elemento clicado e currentTarget será o .header div:

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

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

Eu tropecei nessa questão, procurando outra resposta.

Eu queria impedir que todas as crianças desencadeassem os pais.

Este é o método mais fácil e mais legível para isso:

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

Melhor maneira de usar on() com encadeamento como,

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

Tente testar para o elemento DOM

if (!!$(selector)[0]) // do stuff




jquery