停止div内图像上的单击事件

Question

我正在创建一个简单的灯箱来显示照片。当您单击图库中的图像时，它会展开以占据屏幕的大部分内容，同时将所有页面的内容涂黑。要做到这一点，我只需将div附加到其中的图像附加到DOM，如下所示：

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

我正在尝试创建隐藏此DIV的另一个onclick事件，但仅当点击是图像以外的任何位置时。因此，如果你点击图像我不希望div消失....只有你点击图像两侧的任何黑色部分。我把onclick绑在了“身体”上，如下：

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

问题是即使我点击它消失的图像。我怎么能禁用它？

Answer 1

尝试阻止事件从图像传播到正文。

例如：

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