jQuery select only the current element when using on click

Question

Is it possible to cleanly select only the current clicked div and not children when using .on("click",?

Basically I have a outer div that when faded in is 100% width and 100% height, it then has a container in the middle, my aim is to have it when you click the outer div it fades both out but not when you click on the inner div.

I've created a jFiddle here to demonstrate the issue: http://jsfiddle.net/silver89/kaxsL/

I've tried using div > #box but had no luck so looking for more suggestions?

Answer 1

Try this:

$(document).on("click", "a", function(){
     $("#box").fadeIn("fast");
     return false;
});

$('div#box').on('click',function(e){
    $(this).fadeOut();
});

$('div.inner').on('click',function(e){
   e.stopPropagation();
});

You just need to stop the event from bubbling up. You can do whatever you want to select either div. ​