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

Question

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

Answer 1

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

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

例如,你可以在jQuery中做这样的事情:

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

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