Stop click from working on inner elements

Question

I have a div that covers the screen. Within the div is another div and within that, an image get dynamically placed. When the user clicks on the outer div it closes, and that is fine. When the user clicks on the image or the inner div it closes as well, how can I stop that from happening? I only want it to close if they click on the outer div.

This is what I am using; what do I need to do to make this work?

$("#black-out").click(function(){
    $(this).fadeOut("slow");
});

The HTML:

<div id="black-out"><div id="image-holder"></div></div>

Answer 1

Check if the clicked element is the same as the one the event was bound to :

$("#black-out").click(function(e){
    if (e.target == this) $(this).fadeOut("slow");
});