jquery stop child löst ein übergeordnetes Ereignis aus

Ich habe eine Div, an die ich eine onclickVeranstaltung angehängt habe. In diesem Div gibt es ein Tag mit einem Link. Wenn ich auf den Link onclickklicke, wird auch das Ereignis vom div ausgelöst. Wie kann ich dies deaktivieren, damit beim Klicken auf den Link onclicknicht das Div ausgelöst wird?

Skript:

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

HTML Quelltext:

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

Mach das:

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

Wenn Sie mehr über .stopPropagation () erfahren möchten, klicken Sie hier .

Oder, anstatt einen zusätzlichen Event - Handler mit einem anderen Handler zu verhindern, können Sie das verwenden Ereignisobjekt Argument zu Ihrem Click - Ereignishandler übergeben , um zu bestimmen , ob ein Kind geklickt wurde. targetwird das angeklickte Element sein und currentTargetwird das .header div sein:

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

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

Besser durch Verwendung von on () mit Verkettung wie,

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

Die Antworten hier nahmen die Frage des OP zu wörtlich. Wie können diese Antworten zu einem Szenario erweitert werden, in dem es VIELE untergeordnete Elemente gibt, nicht nur ein einzelnes <a>Tag? Hier ist eine Möglichkeit.

Angenommen, Sie haben eine Fotogalerie mit einem verdunkelten Hintergrund und die im Browser zentrierten Fotos. Wenn Sie auf den schwarzen Hintergrund klicken (aber nichts darin), soll die Überlagerung geschlossen werden.

Hier ist ein möglicher HTML-Code:

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

Und so würde das JavaScript funktionieren:

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

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

Dadurch werden die Klickereignisse von Elementen innerhalb .contentsjeder Recherche gestoppt, .gallerysodass die Galerie nur geschlossen wird, wenn Sie in den ausgeblendeten schwarzen Hintergrundbereich klicken, nicht jedoch, wenn Sie in den Inhaltsbereich klicken. Dies kann auf viele verschiedene Szenarien angewendet werden.

Ich stolperte über diese Frage und suchte nach einer anderen Antwort.

Ich wollte verhindern, dass alle Kinder die Eltern auslösen.

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

Oder dieses:

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

Die einfachste Lösung besteht darin, den Kindern dieses CSS hinzuzufügen:

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

Ein kurzer Weg, dies zu tun:

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