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;

Javascript：从单个操作触发的多个事件

3 个答案: