javascript - Javascript：从单个动作触发的多个事件

Question

我有一个 onclick 事件附加到我的页面中的一个区域，当用户单击它时（自然地）会触发某个操作。我最近向该区域添加了图像。当用户单击该图像时，我希望发生另一个动作，并且我不希望与整个区域相关联的动作发生。但是，我发现这两个事件实际上都是在单击图像时触发的。单击图像时如何抑制区域范围的操作？

Answer 1

您遇到的问题称为事件冒泡。图像的单击事件会冒泡到该节点的所有父元素。你想取消冒泡。

适用于所有浏览器的最佳方法是使用 JavaScript 框架。jQuery有一个非常简单的方法来做到这一点。其他框架也有类似的取消冒泡的机制，我只是碰巧最熟悉jQuery。

例如，您可以在 jQuery 中执行以下操作：

$('img').click(function () {
    // Do some stuff

    return false;// <- Cancels bubbling to parent elements.
});

Answer 2

Darit 是正确的，您需要阻止事件冒泡（传播）：

function imgEventHandler(e) {
    // ^notice: pass 'e' (W3C event)

    // W3C:
    e.stopPropagation();

    // IE:
    if (window.event) {
        window.event.cancelBubble = true;
    }

}

Answer 3

在图像的事件处理程序中

event.cancelBubble = true;

然后最后做

return false;