Stop javascript event propogation

Question

Wenn Sie den Mauszeiger über eines der Bilder auf der folgenden Website bewegen, erscheint ein div mit darin enthaltenen Aktionsschaltflächen. Wenn Sie auf den div klicken, öffnet sich ein Pop-up, wenn Sie auf die untergeordneten Aktionsschaltflächen klicken, wird ein anderes Ereignis ausgelöst.

In der Minute das Pop-up passiert, wenn Sie auf eine der Child-Schaltflächen des div klicken. Ich habe versucht, die Ereignisausbreitung mit dem folgenden Code zu stoppen. Kann mir bitte jemand helfen?

http://penguinenglishlibrary.tumblr.com/

$(document).on('click', '#DOMWindow .like', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

}); 

Answer 1

Sie können die Fortpflanzung nicht aufhören, weil das Ereignis übertragen wird. Brauchen Sie wirklich die Delegierung, d. H. Existiert zum Zeitpunkt der Bindung bereits #DOMWindow .like? Im Falle, dass es können Sie wie folgt tun:

$('#DOMWindow .like').on('click', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

Oder, wie ich in den Kommentaren später sagte:

Wenn Sie wirklich Delegation benötigen, können Sie Ihre Handler-Logik in ein, wenn das wrap Prüft, ob event.target #DOMWindow .like ist. Wenn dies der Fall ist, lassen Sie den Handler seine Arbeit machen, andernfalls bedeutet es, dass es brodelt, also tun Sie nichts.

Answer 2

vielleicht

jQuery('#DOMWindow .like').unbind('mouseenter mouseleave'); 

asuming Sie ein Event auf jQuery (.selector ') befestigt ist. Schweben() es funktionieren könnte

Answer 3

Sie können nicht Ausbreitung mit der Art und Weise Ihre Veranstaltung gebunden ist, stoppen. Es ist an document gebunden. Sobald das Ereignis document erreicht, wird es nach oben gesprudelt und kann daher nicht gestoppt werden, da es bereits weitergegeben wurde.

Versuchen Sie, das Ereignis an ein übergeordnetes Element zu binden, das näher an .like liegt, z. B. #DOMWindow. Hinweis: Das Element, an das Sie das Ereignis binden, muss sich im DOM befinden, wenn dieses aufgerufen wird (und im DOM bleiben).

$('#DOMWindow').on('click', '.like', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

Schauen Sie sich dieses Beispiel, das ich gemacht: http://jsfiddle.net/QAZ3v/ Es sollte Ihnen zeigen, was ich meine.

Answer 4

Gemäß der Dokumentation für die on() Funktion in jQuery,

standardmäßig die meisten Veranstaltungen sprudeln aus dem ursprünglichen Ereignis-Ziel auf das Dokumentelement. Bei jedem Element auf dem Weg ruft jQuery alle passenden Event-Handler auf, die angehängt wurden. Ein Handler kann verhindern, dass das Ereignis weiter oben in der Dokumentstruktur aufblubbert (und somit verhindert, dass Handler für diese Elemente ausgeführt werden), indem er event.stopPropagation() aufruft. Alle anderen Handler, die am aktuellen Element angehängt sind, werden jedoch ausgeführt. Um dies zu verhindern, rufen Sie event.stopImmediatePropagation() auf. (Event-Handler an ein Element gebunden sind, in der gleichen Reihenfolge genannt, dass sie gebunden waren.)

So scheint es, dass

event.stopImmediatePropagation(); 

ist das, was Sie suchen. Die Rückgabe von false kann ebenfalls funktionieren, aber ich bin mir nicht ganz sicher.

Quelle: http://api.jquery.com/on/

Edit: Nachdem in einer Geige meiner beiden Vorschläge zu testen, scheint es, dass weder Arbeit für Click-Handler. Ich würde mich interessieren, ob sie für das on() arbeiten.