Wie kann ich einen Klick außerhalb eines Elements erkennen?

Ich habe einige HTML-Menüs, die ich vollständig anzeigen, wenn ein Benutzer auf den Kopf dieser Menüs klickt. Ich möchte diese Elemente ausblenden, wenn der Benutzer außerhalb der Menüs klickt' Bereich.

Ist so etwas mit jQuery möglich?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});
Lösung

HINWEIS: Die Verwendung von stopEventPropagation() sollte vermieden werden, da sie den normalen Ereignisfluss im DOM unterbricht. Siehe diesen Artikel für weitere Informationen. Verwenden Sie stattdessen diese Methode

Hängen Sie ein Klick-Ereignis an den Dokumentenkörper an, das das Fenster schließt. Fügen Sie dem Container ein separates Klick-Ereignis zu, das die Weitergabe an den Dokumentenkörper stoppt.

$(window).click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});
Kommentare (30)

Ich habe eine Anwendung, die ähnlich wie das Beispiel von Eran funktioniert, außer dass ich das Klick-Ereignis an den Körper anhänge, wenn ich das Menü öffne... Ungefähr so:

$('#menucontainer').click(function(event) {
  $('html').one('click',function() {
    // Hide the menus
  });

  event.stopPropagation();
});

Weitere Informationen über jQuery's one() Funktion

Kommentare (7)

Überprüfen Sie das Ziel des Fensterklick-Ereignisses (es sollte sich auf das Fenster ausbreiten, solange es nirgendwo anders erfasst wird), und stellen Sie sicher, dass es keines der Menüelemente ist. Wenn nicht, dann sind Sie außerhalb Ihres Menüs.

Oder überprüfen Sie die Position des Klicks und sehen Sie nach, ob er sich innerhalb des Menübereichs befindet.

Kommentare (0)