jquery stop potomek wyzwala zdarzenie nadrzędne

Mam div, do którego przypisałem onclickwydarzenie. w tym div znajduje się tag z linkiem. Kiedy kliknę link, onclickwywołane zostanie również zdarzenie z div. Jak mogę to wyłączyć, aby kliknięcie linku na div onclicknie było uruchamiane?

scenariusz:

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

Kod HTML:

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

Zrób to:

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

Jeśli chcesz przeczytać więcej na temat .stopPropagation (), spójrz tutaj .

Lub zamiast posiadania dodatkowej procedury obsługi zdarzeń w celu zapobieżenia innej procedurze obsługi, możesz użyć argumentu Obiekt zdarzenia przekazanego do procedury obsługi zdarzenia kliknięcia, aby ustalić, czy dziecko zostało kliknięte. targetbędzie klikniętym elementem i currentTargetbędzie div .header:

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

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

Lepszy sposób, używając on () z łańcuchami typu,

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

Odpowiedzi tutaj przyjęły pytanie OP zbyt dosłownie. Jak te odpowiedzi można rozwinąć w scenariusz, w którym WIELE elementów potomnych, a nie tylko jednego <a>znacznika? Oto jeden sposób.

Załóżmy, że masz galerię zdjęć z zaciemnionym tłem i zdjęciami wyśrodkowanymi w przeglądarce. Po kliknięciu czarnego tła (ale niczego w nim) nie chcesz, aby nakładka została zamknięta.

Oto kilka możliwych 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>

A oto jak działa JavaScript:

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

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

To zatrzyma zdarzenia kliknięcia z elementów wewnątrz .contentskażdego badania, .gallerywięc galeria zostanie zamknięta tylko po kliknięciu wyblakłego czarnego obszaru tła, ale nie po kliknięciu w obszarze zawartości. Można to zastosować do wielu różnych scenariuszy.

Natknąłem się na to pytanie, szukając innej odpowiedzi.

Chciałem uniemożliwić wszystkim dzieciom wyzwolenie rodzica.

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

Albo to:

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

Najprostszym rozwiązaniem jest dodanie tego CSS do dzieci:

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

Krótszy sposób, aby to zrobić:

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