jQuery：单击body时隐藏（）框而不是元素本身的（）框？

Question

I have a <a href="#" id="btn">Show Box</a> somwhere in my DOM. Additionally I have a div#overlay that is by default set to display:none; .

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

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

Why is this not working? I want the #btn to toggle() the overlay when clicking it. However when the overlay is visible and I click anywhere on the document (except the #btn itself or the #overlay ) I want the overlay also to be hidden.

Answer 1

You are capturing a click on the body which itself is never #btn or #overlay , and so it does not work as expected. What you need to check against instead is 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

Use event.target.id for comparing clicked area's id

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