1

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

4

3 回答 3

5

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

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

例如,您可以在 jQuery 中执行以下操作:

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

    return false;// <- Cancels bubbling to parent elements.
});
于 2009-06-08T16:17:21.730 回答
4

Darit 是正确的,您需要阻止事件冒泡(传播):

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

    // W3C:
    e.stopPropagation();

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

}
于 2009-06-08T16:20:53.227 回答
1

在图像的事件处理程序中

event.cancelBubble = true;

然后最后做

return false;
于 2009-06-08T16:15:28.220 回答