jQuery Child is capturing clicks, only want Parent

Question

Say i have this:

<div id="outer">
 <div id="inner">
 </div>
</div>

The outer div's dimensions are 500x500, and the inner is 100x100. I'm trying to employ the following:

$('#outer').click(function() {
    $('#outer').fadeOut();
});

But when you click on the 100x100 area of #inner, it still fades out. How to prevent this?

Answer 1

I figured out that this code works better, and is not dependent on knowing the element's id or class:

$('#outer').click(function(e) {
    if (e.target === this){
        $('#outer').fadeOut();
    }
});

Answer 2

Better not to assign click handlers for the inner elements. In the click function check event target equal to outer. Something like

$('#outer').click(function(e) {
    if (e.target.id === "outer"){
        $('#outer').fadeOut();
    }
});

Working Demo