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在单击时切换（）覆盖。但是，当覆盖层可见并且我单击文档上的任意位置（#btn自身或除外#overlay）时，我希望覆盖层也被隐藏。

Answer 1

您正在捕获 a clickon bodywhich 本身从来不是 #btnor #overlay，因此它无法按预期工作。你需要检查的是event.target

IE

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

Answer 2

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

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