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

Für eine einfachere Nutzung und einen aussagekräftigeren Code habe ich ein jQuery-Plugin für diese Funktion erstellt:

$('div.my-element').clickOut(function(target) { 
    //do something here... 
});

Nota: Ziel ist das Element, das der Benutzer tatsächlich angeklickt hat. Aber Callback wird immer noch im Kontext des ursprünglichen Elements ausgeführt, so können Sie este wie Sie in einem jQuery-Callback erwarten würden.

Plugin:

$.fn.clickOut = function (parent, fn) {
    var context = this;
    fn = (typeof parent === 'function') ? parent : fn;
    parent = (parent instanceof jQuery) ? parent : $(document);

    context.each(function () {
        var that = this;
        parent.on('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.is(that) && !clicked.parents().is(that)) {
                if (typeof fn === 'function') {
                    fn.call(that, clicked);
                }
            }
        });

    });
    return context;
};

Standardmäßig wird der Click-Event-Listener auf dem Dokument platziert. Wenn Sie jedoch den Anwendungsbereich des Ereignis-Listeners einschränken möchten, können Sie ein jQuery-Objekt übergeben, das ein übergeordnetes Element darstellt, das das oberste übergeordnete Element ist, bei dem auf Klicks geachtet wird. Dadurch werden unnötige Ereignis-Listener auf Dokumentenebene vermieden. Natürlich funktioniert dies nur, wenn das übergebene übergeordnete Element ein übergeordnetes Element des ursprünglichen Elements ist.

So verwenden:

$('div.my-element').clickOut($('div.my-parent'), function(target) { 
    //do something here...
});

Answer 2

Bewerten Sie die beliebteste Antwort hoch, aber fügen Sie hinzu

&& (e.target != $('html').get(0)) // ignore the scrollbar

Ein Klick auf eine Bildlaufleiste führt also nicht dazu, dass Ihr Zielelement [ausgeblendet oder was auch immer] wird.

Answer 3

$(document).click(function() {
    $(".overlay-window").hide();
});
$(".overlay-window").click(function() {
    return false;
});

Wenn Sie auf das Dokument klicken, wird ein bestimmtes Element ausgeblendet, es sei denn, Sie klicken auf dasselbe Element.

Answer 4

Ich habe es so gemacht in YUI  3:

// Detect the click anywhere other than the overlay element to close it.
Y.one(document).on('click', function (e) {
    if (e.target.ancestor('#overlay') === null && e.target.get('id') != 'show' && overlay.get('visible') == true) {
        overlay.hide();
    }
});

Ich prüfe, ob der Vorgänger nicht der Container des Widgetelements ist,
wenn das Ziel nicht das geöffnete Widget/Element ist,
wenn das Widget/Element, das ich schließen möchte, bereits geöffnet ist (nicht so wichtig).

Answer 5

Ich möchte nur @Pistos Antwort deutlicher machen, da sie in den Kommentaren versteckt ist.

Diese Lösung hat bei mir perfekt funktioniert. Einfaches JS:

var elementToToggle = $('.some-element');
$(document).click( function(event) {
  if( $(event.target).closest(elementToToggle).length === 0 ) {
    elementToToggle.hide();
  }
});

in CoffeeScript:

elementToToggle = $('.some-element')
$(document).click (event) ->
  if $(event.target).closest(elementToToggle).length == 0
    elementToToggle.hide()