Klick auf Child triggert Event des Parents in Jquery - Wie verhindern?

Question

Child vom Parent-Event ausschließen in Jquery

Ich habe ein umschließendes div, in dem sich ein Anchor befindet. Der Aufbau sieht so aus:

<div class="wrapper">
    <a href="/visitsite">Zur Seite</a>
    <p class="siblings">
        <span>Bla bli blu</span>
    </p>
</div>

Der .wrapper ist mit einem click()-Event in Query versehen:

$(document).ready(function(){
    $(".wrapper").click(function(){
        // hide or show
        $(this).children(".siblings").toggle();
    });
})

Wenn ich auf den Link klicke (und nicht auf den umschließenden Wrapper), sollte der Nutzer zur verlinkten Seite kommen. Leider wird hier aber auch der click-Event vom div.wrapper ausgelöst.

Fiddle: https://jsfiddle.net/oazhxqun/1/

Wie kann ich dieses Verhalten verhinden, sodass beim Klicken des Links der div.wrapper nicht beeinflusst wird?

Answer 1

Möglichkeit 1:

Dafür kannst du event.stopPropagation() benutzen:

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Javascript:

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

Fiddle: https://jsfiddle.net/kai_noack/gu3dxspk/3/

Tipp: Wenn du alle Kinder von .wrapper ausschließen möchtest, dann nutze $(".wrapper *").

Möglichkeit 2

Eine Alternative, die ich auch häufig verwende:

$('.wrapper').click(function(e){
    // mache nichts, wenn .wrapper nicht direkt geklickt wurde
    if(e.target !== e.currentTarget){
       return;
    }
    // ein Child von .wrapper wurde geklickt
    $(this).children(".siblings").toggle();
});

Fiddle: https://jsfiddle.net/kai_noack/18grmqwu/2/

Möglichkeit 3:

Das nutze ich für die Lounge oben rechts bei den Benachrichtigungen.

// Klick wird auf gesamten Webseite "document" registriert
$(document).click(function(event)
{
    // Klick außerhalb des Benachrichtigungsfensters #nfyWrap, wir stellen sicher, 
    // dass wir nicht auf das Fenster selbst klicken
    if($(event.target).parents().index($('#nfyWrap')) == -1)
    {
       // ist das Benachrichtigungsfenster zu sehen, dann blende es aus
       if($('#nfyWrap').is(':visible'))
       {
           $('#nfyWrap').fadeOut(500);
       }
    }
});