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

Question

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

Ist so etwas mit jQuery möglich?

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

Answer 1

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

Mehr Informationen über jQuery's one() función

Answer 2

Nach Recherchen habe ich drei funktionierende Lösungen gefunden (ich habe die Links zu den Seiten als Referenz vergessen)

Erste Lösung

<script>
    //The good thing about this solution is it doesn't stop event propagation.

    var clickFlag = 0;
    $('body').on('click', function () {
        if(clickFlag == 0) {
            console.log('hide element here');
            /* Hide element here */
        }
        else {
            clickFlag=0;
        }
    });
    $('body').on('click','#testDiv', function (event) {
        clickFlag = 1;
        console.log('showed the element');
        /* Show the element */
    });
</script>

Zweite Lösung

<script>
    $('body').on('click', function(e) {
        if($(e.target).closest('#testDiv').length == 0) {
           /* Hide dropdown here */
        }
    });
</script>

Dritte Lösung

<script>
    var specifiedElement = document.getElementById('testDiv');
    document.addEventListener('click', function(event) {
        var isClickInside = specifiedElement.contains(event.target);
        if (isClickInside) {
          console.log('You clicked inside')
        }
        else {
          console.log('You clicked outside')
        }
    });
</script>

Answer 3

$("#menuscontainer").click(function() {
    $(this).focus();
});
$("#menuscontainer").blur(function(){
    $(this).hide();
});

Für mich funktioniert das sehr gut.

Answer 4

Dafür gibt es jetzt ein Plugin: externe Veranstaltungen ( Blogbeitrag )

Folgendes geschieht, wenn ein clickoutside Handler (WLOG) an ein Element gebunden ist:

• wird das Element zu einem Array hinzugefügt, das alle Elemente mit clickoutside Handler
• a ( namengebend ) anklicken. Handler ist an das Dokument gebunden (falls nicht bereits vorhanden)
• auf jeder anklicken. in dem Dokument, die clickoutside Ereignis wird für die Elemente in diesem Array ausgelöst, die nicht gleich oder ein Elternteil des anklicken. -Ereignisse Ziel
• Zusätzlich wird das event.target für die clickoutside Ereignis wird auf das Element gesetzt, auf das der Benutzer geklickt hat (damit Sie überhaupt wissen, was der Benutzer geklickt hat, und nicht nur, dass er draußen geklickt hat)

So werden keine Ereignisse von der Ausbreitung abgehalten und zusätzliche anklicken. Handler können "oberhalb" des Elements mit dem Outside-Handler verwendet werden.

Answer 5

Das hat bei mir perfekt funktioniert!

$('html').click(function (e) {
    if (e.target.id == 'YOUR-DIV-ID') {
        //do something
    } else {
        //do something
    }
});