jQuery:在元素本身上单击正文时隐藏(）框，但不是(）

jQuery: hide() box when clicking on body but not() on element itself?

本文关键字：隐藏 正文 元素 单击 jQuery      更新时间：2023-09-26

我的 DOM 中有一个<a href="#" id="btn">Show Box</a> somwhere。 此外，我有一个默认设置为 display:none; 的div#overlay。

// Toggle Overlay
$('#btn').click(function(e) {
    e.preventDefault();
    $('#overlay').toggle();
})
$('body').not('#btn, #overlay').click(function() {
    if ( $('#overlay').is(':visible') ) $('#overlay').hide();
});

为什么这不起作用？我希望#btn在单击它时切换((覆盖层。但是，当叠加层可见并且我单击文档上的任意位置(#btn本身或#overlay除外(时，我希望叠加层也被隐藏。

您正在body上捕获一个click，该本身永远不会#btn或#overlay，因此它无法按预期工作。您需要检查的是event.target

即

$('body').click(function(e) {
    var target = $(e.target);
    if(!target.is('#btn') && !target.is('#overlay')) {
       if ( $('#overlay').is(':visible') ) $('#overlay').hide();
    }
});

使用 event.target.id 比较点击区域的id 

$('body').click(function(e) {
   if(e.target.id != 'btn' && e.target.id != 'overlay')
      if ( $('#overlay').is(':visible') ) $('#overlay').hide();
})
相关文章：