Остановить событие клика на изображении внутри div

Question

Я создаю простой световой блок для отображения фотографий. Когда вы нажимаете на изображение в галерее, оно расширяется, чтобы занять большую часть экрана, а затем закрывая все содержимое страницы позади. Чтобы сделать это, я просто присоединять div с изображением щелкнул в нем к DOM, как это:

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

Я пытаюсь создать еще одно событие OnClick, который скрывает этот DIV, но только если щелчок в любом месте, кроме изображение. Поэтому, если вы нажмете на изображение, я не хочу, чтобы div исчез ... только если вы нажмете на любую часть затемненной части по бокам изображения. Я привязал OnClick к «телу», как так:

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

Проблема заключается в том, даже если я нажимаю изображение он исчезает. Как я могу отключить это?

Answer 1

Попробуйте остановить событие от распространения на теле с изображения.

Например:

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