Klick mit jQuery außerhalb eines Elements erkennen
Das nachfolgende Codebeispiel in JavaScript zeigt die Umsetzung. Im ersten Event, welcher an das window Objekt gekoppelt wird, wird die Funktion zum Schließen des modalen Dialogs realisiert. Dabei wird die jQuery Methode click verwendet. Das zweite Event beinhaltet den Fuktionsaufruf „stopPropagation“, der die Vererbung des ersten Events durch das Elternelement verhindert.
$(window).click(function() {
// Modaler Dialog schliessen
});
$('#dialog').click(function(event){
event.stopPropagation();
});
Das Beispiel oben ist sehr schlank gehalten, kann jedoch zu Problemen innerhalb des Dialogs führen, wenn klickbare Elemente davor definiert wurden. Daher kann stattdessen das optimierte nachfolgende Beispiel, welches eine zusätzliche Abfrage beinhaltet, verwendet werden:
$(document).click(function(event) {
if(!$(event.target).closest('#dialog').length) {
if($('#dialog').is(":visible")) {
$('#dialog').hide();
}
}
});
