jQuery单击页面中的任何位置,除了1 div

Question

当我点击页面上的任何地方(除了一个div(id=menu_content))之外,如何触发功能？

非常感谢你

Answer 1

你可以申请click对body文件和取消click,如果处理click是由ID为DIV生成的事件menu_content,这将绑定事件到单个元素和节约的结合click与除每一个元素menu_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

});

Answer 2

请参阅jQuery Event Target的文档.使用事件对象的target属性,可以检测单击源自#menu_content元素的位置,如果是,则提前终止单击处理程序.您将不得不使用.closest()来处理点击源自后代的情况#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
});

Answer 3

试试这个

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

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

你也可以使用 外面的活动

Answer 4

我知道这个问题已经回答，并且所有答案都很好。但对于有类似（但不完全相同）问题的人，我想在这个问题上加我的两分钱。

以更一般的方式，我们可以执行以下操作：

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

这样，我们不仅可以处理由具有id的menu_content元素以外的任何事物触发的事件，而且还可以处理由我们可以使用CSS选择器选择的元素以外的任何事物触发的事件。

例如，在下面的代码片段中，我将获取除所有<li>元素（均为id的div元素的后代）以外的任何元素触发的事件myNavbar。

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

Answer 5

这是我所做的。想要确保我可以单击日期选择器中的任何孩子而不关闭它。

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

我的实际代码：

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