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

【问题标题】：Stop click event on an image inside of a div在 div 内的图像上停止单击事件
【发布时间】：2017-12-15 21:43:33
【问题描述】：

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

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

我正在尝试创建另一个隐藏此 DIV 的 onclick 事件，但前提是单击位于图像以外的任何位置。因此，如果您单击图像，我不希望 div 消失....仅当您单击图像两侧的任何涂黑部分时。我像这样将 onclick 绑定到“body”：

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

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

【问题讨论】：

【解决方案1】：

尝试阻止事件从图像传播到身体。

例如：

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

【讨论】：