jQuery: Hide popup if click detected elsewhere

Question

I'm trying to hide a div if the user clicks anywhere BUT the popup OR it's children. This is the code I have so far:

$("body").click(function(){
    var $target = $(event.target);
    if(!$target.is(".popup") || !$target.is(".popup").children()){
        $("body").find(".popup").fadeOut().removeClass('active');
    }
});

It works for the .popup div, but if any of it's children are clicked, it hides it anyway.

Answer 1

Brush up on your boolean logic! :)

if(!$target.is(".popup") && !$target.parents().is(".popup"))

Answer 2

You really could simplify this a bit I think:

// If an event gets to the body
$("body").click(function(){
  $(".popup").fadeOut().removeClass("active");
});

// Prevent events from getting pass .popup
$(".popup").click(function(e){
  e.stopPropagation();
});

Clicking on the popup, or any of its children will cause propagation to stop before it reaches the body.

Demo of stopping event-propagation: http://jsbin.com/ofeso3/edit