Question

The question of how to detect a click on anywhere except a specified element has been answered a couple of items like here:

Event on a click everywhere on the page outside of the specific div

The problem I have is trying to figure out how to detect a click anywhere except a given element including one of it’s children.

For example in this code:

http://jsfiddle.net/K5cEm/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {

$(document).click(function(e) {
   $('#somediv').hide();
});
$('#somediv').click(function(e) {
   e.stopPropagation();
});

});
</script>

<div style="border: 1px solid red; width:100px; height: 100px" id="somediv">

    <span style="display: block; border: 1px solid green; width:50px; height: 50px; margin: 0 auto" id="someSpan"></span>

</div>

Clicking anywhere outside the red div should cause it to hide. Not only that but also clicking on it’s child element (the green span) should cause it to hide. The only time it shouldn’t hide is if you click on it but not on the span. As it stands now, the click on the span is also considered a click on the parent div hence it doesn’t hide the div if the span is clicked.

How to achieve this?

Answer 1

You can compare the click’s target to the element in question:

$(document).click(function(e) {
    if (e.target != $('#somediv')[0]) {
        $('#somediv').hide();
    }
});

Demo: http://jsfiddle.net/K5cEm/7/