2941 Stimmen

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

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

28voto

Jitendra Damor Punkte 766

Es gibt eine einfache Lösung für diese Situation:

$(document).mouseup(function (e)
{
    var container = $("YOUR SELECTOR"); // Give you class or ID

    if (!container.is(e.target) &&            // If the target of the click is not the desired div or section
        container.has(e.target).length === 0) // ... nor a descendant-child of the container
    {
        container.hide();
    }
});

Das obige Skript versteckt die div wenn außerhalb der div Klick-Ereignis ausgelöst wird.

Weitere Informationen finden Sie im folgenden Blog: http://www.codecanal.com/detect-click-outside-div-using-javascript/

27voto

benb Punkte 693

Wie ein anderer Poster sagte, gibt es eine Menge Probleme, vor allem wenn das Element, das Sie anzeigen (in diesem Fall ein Menü) interaktive Elemente hat. Ich habe die folgende Methode zu sein ziemlich robust gefunden:

$('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            // your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});

25voto

Jovanni G Punkte 318

Ich bin erstaunt, dass niemand die Bedeutung der focusout Veranstaltung:

var button = document.getElementById('button');
button.addEventListener('click', function(e){
  e.target.style.backgroundColor = 'green';
});
button.addEventListener('focusout', function(e){
  e.target.style.backgroundColor = '';
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <button id="button">Click</button>
</body>
</html>

24voto

Chris MacDonald Punkte 5827

Ü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.

23voto

Iman Sedighi Punkte 6680

Lösung1

Anstatt event.stopPropagation() zu verwenden, was einige Nebeneffekte haben kann, definieren Sie einfach eine einfache Flag-Variable und fügen eine hinzu if Zustand. Ich habe dies getestet und es hat ohne Nebenwirkungen von stopPropagation funktioniert:

var flag = "1";
$('#menucontainer').click(function(event){
    flag = "0"; // flag 0 means click happened in the area where we should not do any action
});

$('html').click(function() {
    if(flag != "0"){
        // Hide the menus if visible
    }
    else {
        flag = "1";
    }
});

Lösung2

Mit nur einem einfachen if Zustand:

$(document).on('click', function(event){
    var container = $("#menucontainer");
    if (!container.is(event.target) &&            // If the target of the click isn't the container...
        container.has(event.target).length === 0) // ... nor a descendant of the container
    {
        // Do whatever you want to do when click is outside the element
    }
});

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X