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

Verwendung:

var go = false;
$(document).click(function(){
    if(go){
        $('#divID').hide();
        go = false;
    }
})

$("#divID").mouseover(function(){
    go = false;
});

$("#divID").mouseout(function (){
    go = true;
});

$("btnID").click( function(){
    if($("#divID:visible").length==1)
        $("#divID").hide(); // Toggle
    $("#divID").show();
});

Answer 2

Ich habe unten Skript verwendet und mit jQuery getan.

jQuery(document).click(function(e) {
    var target = e.target; //target div recorded
    if (!jQuery(target).is('#tobehide') ) {
        jQuery(this).fadeOut(); //if the click element is not the above id will hide
    }
})

Nachfolgend finden Sie den HTML-Code

<div class="main-container">
<div> Hello I am the title</div>
<div class="tobehide">I will hide when you click outside of me</div>
</div>

Sie können den Leitfaden lesen aquí

Answer 3

Hier ist eine einfache Lösung durch reines Javascript. Sie ist aktuell mit ES6 :

var isMenuClick = false;
var menu = document.getElementById('menuscontainer');
document.addEventListener('click',()=>{
    if(!isMenuClick){
       //Hide the menu here
    }
    //Reset isMenuClick 
    isMenuClick = false;
})
menu.addEventListener('click',()=>{
    isMenuClick = true;
})

Answer 4

Hängen Sie einen Klick-Ereignis-Listener an das Dokument an. Innerhalb des Ereignis-Listeners können Sie sich die Ereignisobjekt insbesondere die ereignis.ziel um zu sehen, welches Element angeklickt wurde:

$(document).click(function(e){
    if ($(e.target).closest("#menuscontainer").length == 0) {
        // .closest can help you determine if the element 
        // or one of its ancestors is #menuscontainer
        console.log("hide");
    }
});

Answer 5

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