change - jquery ui tags




jquery parar filho provocando evento pai (6)

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

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

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>

As respostas aqui levaram a pergunta do OP muito literalmente. Como essas respostas podem ser expandidas em um cenário onde existem MUITOS elementos filho, não apenas uma única tag <a> ? Aqui está um caminho.

Digamos que você tenha uma galeria de fotos com um fundo escurecido e as fotos centralizadas no navegador. Quando você clica no plano de fundo preto (mas não em nada dentro dele), deseja que a superposição seja fechada.

Aqui está um possível 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>

E aqui está como o JavaScript funcionaria:

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

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

Isso interromperá os eventos de clique dos elementos dentro de .contents de todas as pesquisas .gallery portanto, a galeria será fechada somente quando você clicar na área de fundo preto desbotada, mas não quando você clicar na área de conteúdo. Isso pode ser aplicado a muitos cenários diferentes.


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 .


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();
   });
});

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();
});

Um jeito mais curto de fazer isso:

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




jquery