javascript - jQuery:单击主体而不是元素本身时隐藏()框？

Question

我有一个 <a href="#" id="btn">Show Box</a>在我的 DOM 中的某个地方。另外我有一个 div#overlay默认设置为 display:none; .

// Toggle Overlay
$('#btn').click(function(e) {
    e.preventDefault();
    $('#overlay').toggle();
})

$('body').not('#btn, #overlay').click(function() {
    if ( $('#overlay').is(':visible') ) $('#overlay').hide();
});

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

Answer 1

您正在捕获 body 上的 click，它本身是 never #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();
    }
});