表单下方元素的鼠标点击触发事件被点击答案

【问题标题】：Mouse Click Triggering Event of Element below Form being clicked表单下方元素的鼠标点击触发事件被点击
【发布时间】：2015-09-18 01:34:13
【问题描述】：

我有一个提交按钮（表单）悬停在图像缩略图上，允许用户删除图像，如下所示

缩略图（img 元素）还有一个 onclick 事件，该事件会触发一个以全尺寸显示图像的弹出窗口。不幸的是，当我单击“x”按钮（提交表单）时，下面的缩略图的 onclick 事件也会被触发，以便在页面重定向之前向用户显示一个弹出窗口。我怎样才能防止这种情况发生？

附加信息

按钮的css如下：

.delete_image_button
{
    position:               absolute;
    top:                    0px;
    right:                  0px;
    z-index:                1;
}

【问题讨论】：

标签： javascript css onclick mouseevent

【解决方案1】：

您可以使用 jQuery stop propagation 函数，它可以防止事件冒泡

【讨论】：

谢谢，是的，这行得通：

【解决方案2】：

您可以使用 stopPropagation 方法来阻止事件传播到父节点。

$(element).click(function(event){
     event.stopPropagation();
});

【讨论】：