Tobias ScheibleCybercrime Dozent & Live Hacking Speaker
Strand mit roter Flagge

Klick mit jQuery außerhalb eines Elements erkennen

Kürzlich habe ich bei der Entwicklung einer Web-Anwendung einen modalen Dialog eingefügt, welcher mit JavaScript aufgerufen und geschlossen werden sollte. Dabei musste ich eine Funktion realisieren, die auf jeden Klick außerhalb dieses Dialogs diesen wieder schließt. Diese Funktionalität kann sehr einfach mit jQuery realisiert werden.

Mittwoch, 10. Januar 2018
0 Kommentare

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

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.