jQuery stoppropagation bubble down

Question

jQuery stoppropagation bubble down

Mam div z linkiem w środku:

<div id="myDiv">
    <a href="http://www.lol.com">Lol</a>
</div>

Kliknięcie <div /> powinno gdzieś iść, ale kliknięcie dziecka <a /> powinno iść do www.lol.com. widziałem z poprzednich pytań i strony jQuery to .stopropagacja zapobiega bąbelkom w górę, ale jak zapobiec bąbelkom w dół (czy nie jest to konieczne?).

29

jquery event-bubbling

Author: Community, 2010-04-28

Source

2 answers

Problem polegał na tym, że kliknięcie zakotwiczenia nadal wywoływało kliknięcie w twoim <div>. To się nazywa "bulgotanie zdarzeń".

W rzeczywistości istnieje wiele rozwiązań:

Sprawdzanie w module obsługi zdarzenia kliknięcia DIV, czy rzeczywisty element docelowy był kotwicą → jsFiddle

$('#myDiv').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});

Zatrzymanie propagacji zdarzenia z Anchor click listener → jsFiddle

$("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});

Jak zapewne zauważyliście, usunąłem z mojego przykłady:

:not(#ancherComplaint)

To było niepotrzebne, ponieważ nie ma elementu z klasą .expandable-panel-heading, który również ma #ancherComplaint jako swój ID.

Zakładam, że chciałeś stłumić to wydarzenie dla kotwicy. To nie może działać w ten sposób, ponieważ oba selektory (twój i mój) wybierają dokładnie ten sam DIV. Selektor podczas wywoływania nie ma wpływu na słuchacza; ustawia jedynie listę elementów, do których słuchacze mają być zarejestrowani. Ponieważ ta lista jest taka sama w obie wersje, nie ma różnicy.

3

Author: Vijay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-10 15:03:41

score 44 · Accepted Answer

Wydarzenia tylko bańka w górę. Tak więc obsługa zdarzenia click dla elementu a jest wywoływana przed obsługą zdarzenia click dla elementu div. Jeśli chcesz opisać zachowanie, musisz dodać obsługę zdarzenia click do elementu a, który zatrzymuje propagację do div.

$("#myDiv a").click( function(event) {
    event.stopPropagation();
} );

I zachowaj wszystko, co masz w div. Powinno to pozwolić zdarzeniu na wykonanie domyślnej akcji i zapobiec wywołaniu funkcji obsługi w div.

Jeśli chcesz tylko zapobiegać kliknięciom na linki następnie możesz zmienić obsługę zdarzenia dla elementu div

$("#myDiv").click( function( event ) {
    if( !$( event.target ).is( "a" ) )
    {
        // existing event handler
    }
} );