jQuery, sayfada 1 div dışında herhangi bir yeri tıklatın

Sayfamda bir div ( id=menu_content) dışında herhangi bir yere tıkladığımda bir işlevi nasıl tetikleyebilirim ?

Sen uygulayabilirsiniz clicküzerinde bodybelgenin ve iptal clickdurumunda işleme clickolay kimliği ile div tarafından oluşturulan menu_content, bu tek elemana olayı bağlanır ve bağlanma tasarrufu clickher eleman hariç ilemenu_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

});

JQuery Event Target belgelerine bakın . Olay nesnesinin target özelliğini kullanarak, #menu_contentöğenin içinde tıklamanın nereden kaynaklandığını algılayabilir ve öyleyse, tıklama işleyicisini erken sonlandırabilirsiniz. .closest()Tıklamanın neslinden kaynaklandığı durumları işlemek için kullanmanız gerekecektir #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
});

bunu dene

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

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

dış etkinlikleri de kullanabilirsiniz

Bu sorunun cevaplandığını biliyorum ve tüm cevaplar güzel. Ama benzer (ama tam olarak aynı olmayan) sorunu olan insanlar için bu soruya iki sentimi de eklemek istedim.

Daha genel bir şekilde, şöyle bir şey yapabiliriz:

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

Bu şekilde, yalnızca kimliğe sahip öğe menu_contentdışında herhangi bir şey tarafından tetiklenen olayları değil, aynı zamanda CSS seçicileri kullanarak seçebileceğimiz herhangi bir öğe dışında herhangi bir öğe tarafından tetiklenen olayları da idare edebiliriz.

Örneğin aşağıdaki kod parçacığında <li>, kimliğine sahip div öğesinin soyundan gelen tüm öğeler dışında herhangi bir öğe tarafından tetiklenen olayları alıyorum myNavbar.

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

işte yaptığım şey. tarih seçicimdeki çocuklardan herhangi birini kapatmadan tıklayabileceğimden emin olmak istedim.

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

gerçek kodum:

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});