Stop click event on an image inside of a div

Question

I'm creating a simple light box to display photos. When you click on an image in a gallery it expands to take up most of the screen while blacking out all content of the page behind. To do this I just append a div with the image clicked within it to the DOM like this:

<div id='image'>
 <img src="someImage">
</div>

I'm trying to create another onclick event that hides this DIV, but only if the click is anywhere other than the image. So if you click on the image I don't want the div to disappear....only if you click on any of the blacked out portion to the sides of the image. I tied the onclick to the "body" like so:

$('body').click(function(){
  $('#image').hide();
}):

The problem is even if I click the image it disappears. How can I disable this?

Answer 1

Try stopping the event from propagating to the body from the image.

For example:

$('#image').on('click', function (e) {
    e.stopPropagation();
});