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

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)?

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

});

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

Versuche dies

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

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

Sie können auch externe Ereignisse verwenden

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

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