Javascript：单个动作触发多个事件

Question

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

Answer 1

Darit是正确的，你需要从冒泡停止事件（传播）：

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

    // W3C: 
    e.stopPropagation(); 

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

} 

Answer 2

在该图像的事件处理程序做

event.cancelBubble = true; 

，然后在年底做

return false; 

Answer 3

你正在运行到被称为事件冒泡的问题。图像的点击事件起泡到该节点的所有父元素。你想取消冒泡。

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

例如，你可以做这样的事情在jQuery的：

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

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