jQuery on() und stopPropagation()

Question

Ich habe einen Seitenbereich, der von links nach innen geschoben wird und Inhalt dynamisch mit get() hinzufügt. Ich möchte alle Klicks außerhalb des Fensterbereichs veranlassen, dass es geschlossen wird, indem eine Funktion ausgelöst wird. Basierend auf anderen Fragen, die ich gelesen habe, habe ich den folgenden Code gefunden.

$('html').click(function() { 
    if (side_showing) { 
     close_side(); 
    } 
}); 

$(document).on("click", "#side", function(event) { 
    event.stopPropagation(); 
}); 

Ich kann nicht scheinen, damit es funktioniert. Ich weiß, dass die on() Funktion ausgelöst wird, aber event.stopPropagation scheint nicht zu sein. Irgendwelche Tipps?

Answer 1

Sie können stopPropagation() nicht mit delegierter Ereignisbehandlung verwenden (wo sich der Ereignishandler auf einem übergeordneten Element befindet).

Das liegt daran, dass die Ereignisweiterleitung die delegierte Ereignisbehandlung überhaupt erst ermöglicht. Wenn also der Ereignishandler aufgerufen wird, hat sich das Ereignis bereits verbreitet.

Die Reihenfolge der Dinge in Ihrem Code ist: Ereignisausbreitung bis zum Dokumentobjekt, dann wird Ihr Event-Handler aufgerufen. Also, wenn Sie event.stopPropagation() aufrufen, tut es nichts, weil das Ereignis bereits propagiert wurde.

Wenn Sie verhindern müssen, dass übergeordnete Objekte die Ereignisausbreitung erhalten, können Sie die delegierte Ereignisbehandlung nicht verwenden. Sie müssen Ereignishandler direkt den Objekten selbst zuweisen, damit Sie das Ereignis abfangen können, BEVOR es sich ausbreitet. Wenn dies dynamisch erstellte Objekte sind, müssen Sie den Ereignishandlern direkt nach ihrer Erstellung zuweisen. Die einzige andere Lösung, die ich kenne, besteht darin, Event-Handler auf die übergeordneten Objekte zu setzen, die diese Ereignisse nicht sehen sollen, und sicherzustellen, dass diese Event-Handler die Ereignisse ignorieren, wenn sie von Ihrem #side Objekt stammen.