scheible.it - Tobias Scheible
Strand mit roter Flagge
Mittwoch, 10. Januar 2018
0 Kommentare

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.

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

Ich arbeite als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort bin ich in den Bereichen IT-Sicherheit und IT-Forensik tätig. Darüber hinaus beschäftige ich mich seit 2001 mit der Planung und Umsetzung von individuellen Web-Anwendungen. Mein Wissen teile ich gerne hier in meinem Blog, bei Vorträgen und auf Workshops.

Alle Blog-Artikel Über mich Facebook Twitter Xing

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzerklärung des Blogs.

nach oben