0 Daumen
37 Aufrufe

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:


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

Gefragt von

1 Antwort

0 Daumen

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:

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:



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

Beantwortet von  –  ❤ Bedanken per Paypal

Ein anderes Problem?

Stell deine Frage

Willkommen bei der Stacklounge! Stell deine Frage sofort und kostenfrei

x
Made by a lovely community
...