jQuery 单击页面中除 1 div 之外的任何位置

IT技术 javascript jquery html triggers click
2021-01-22 06:49:46

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

6个回答

你可以申请clickbody文件和取消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

});
由于closest从当前元素开始,它处理点击menu_content,以及点击后代。我认为第二个if就是你所需要的。
2021-03-17 06:49:46
DIV 中的后代孩子呢?
2021-04-13 06:49:46
我们可以使用最接近检查事件源是否有任何具有 id menu_content 的祖先,例如 if($(evt.target).closest('#menu_content').length) retrun; 检查我更新的答案。
2021-04-13 06:49:46

请参阅jQuery 事件目标的文档使用事件对象的 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
});

试试这个

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

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

你也可以使用 外部事件

这项工作,但使用 event.stopPropagation() 可能会对父级中包含的其他 JS 产生连锁反应。
2021-04-04 06:49:46

我知道这个问题已经回答了,而且所有的答案都很好。但是我想为有类似(但不完全相同)问题的人在这个问题上加两分钱。

以更一般的方式,我们可以这样做:

$('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
    }
});
我只是想说这个方法对我来说很好用,我使用了 .is() 和 .closest() 以及一个没有 ID 但只有一些类的 css 选择器,谢谢
2021-03-21 06:49:46

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

$('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();
    }
});
不错的版本,包括点击儿童和课堂,应该是精选的答案!
2021-03-15 06:49:46