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

Question

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

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

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

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

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

Answer 1

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

例如:

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