jQuery Klicken Sie auf eine beliebige Stelle auf der Seite, außer auf 1 Div

87

Wie kann ich eine Funktion auslösen, wenn ich auf eine beliebige Stelle auf meiner Seite klicke, außer auf ein div ( id=menu_content)?

Vincent Roye
quelle

Antworten:

141

Sie können sich bewerben clickauf bodyDokumenten- und cancel clickVerarbeitung , wenn das clickEreignis durch div mit id erzeugt wird menu_content, dieses Ereignis zu einzelnes Element binden und die Bindung des Sparens clickmit jedem Element außermenu_content

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});
Adil
quelle
3
Was ist mit Nachkommen von Kindern in der DIV?
iKamy
2
Wir können am nächsten verwenden, um zu überprüfen, ob die Quelle des Ereignisses einen Vorfahren mit der ID menu_content hat, z. B. if ($ (evt.target) .closest ('# menu_content'). Length) retrun; Überprüfen Sie meine aktualisierte Antwort.
Adil
Da es closestmit dem aktuellen Element beginnt, werden sowohl das Klicken auf menu_contentals auch das Klicken auf Nachkommen behandelt. Ich denke, der zweite ifist alles was du brauchst.
Goodeye
50

Weitere Informationen finden Sie in der Dokumentation zu jQuery Event Target . Mithilfe der Zieleigenschaft des Ereignisobjekts können Sie erkennen, woher der Klick im #menu_contentElement stammt, und in diesem Fall den Klick-Handler vorzeitig beenden. Sie müssen verwenden .closest(), um Fälle zu behandeln, in denen der Klick von einem Nachkommen von stammt #menu_content.

$(document).click(function(e){

    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content").length > 0 ) {
        return false;
    }

    // Otherwise
    // trigger your click function
});
Nbrooks
quelle
42

Versuche dies

 $('html').click(function() {
 //your stuf
 });

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

Sie können auch externe Ereignisse verwenden

Database_Query
quelle
5
Diese Arbeit, aber die Verwendung von event.stopPropagation () kann Auswirkungen auf andere im übergeordneten JS enthaltene JS haben.
Edd Smith
9

Ich weiß, dass diese Frage beantwortet wurde, und alle Antworten sind nett. Aber ich wollte meine zwei Cent zu dieser Frage für Leute hinzufügen, die ein ähnliches (aber nicht genau dasselbe) Problem haben.

Allgemeiner können wir so etwas tun:

$('body').click(function(evt){    
    if(!$(evt.target).is('#menu_content')) {
        //event handling code
    }
});

Auf diese Weise können wir nicht nur Ereignisse behandeln, die von etwas anderem als einem Element mit ID ausgelöst werden, menu_contentsondern auch Ereignisse, die von etwas anderem als einem Element ausgelöst werden, das wir mithilfe von CSS-Selektoren auswählen können.

Zum Beispiel bekomme ich im folgenden Code-Snippet Ereignisse, die von einem beliebigen Element außer allen ausgelöst werden <li> Elemente, die Nachkommen des div-Elements mit id sind myNavbar.

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});
gandalf
quelle
1
Ich wollte nur sagen, dass diese Methode für mich gut funktioniert hat. Ich habe .is () und auch .closest () mit einem CSS-Selektor verwendet, der keine ID hatte, aber nur einige Klassen. Danke
Relipse
7

Hier ist was ich getan habe. Ich wollte sicherstellen, dass ich auf eines der Kinder in meinem Datepicker klicken kann, ohne es zu schließen.

$('html').click(function(e){
    if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
        // clicked menu content or children
    } else {
        // didnt click menu content
    }
});

Mein aktueller Code:

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});
Nate
quelle
Schöne Version mit Klicks auf Kinder und Klasse, sollte die gewählte Antwort sein!
rAthus