我将一个onclick事件附加到页面中的某个区域,当用户单击该区域时,该事件将触发某个操作(自然)。我最近添加了一个图像到那个区域。当用户点击那个图像时,我希望另一个动作发生,而不希望与整个区域相关联的动作发生。然而,我发现这两个事件都是,实际上在单击图像时触发。如何在单击图像时抑制区域范围的操作?
onclick
soat7uwm1#
您遇到的问题称为事件冒泡。图像的单击事件冒泡到该节点的所有父元素。您希望取消冒泡。最好的方法是使用一个JavaScript框架,它可以在所有的浏览器上工作。jQuery有一个非常简单的方法来完成这个任务。其他框架也有类似的机制来取消冒泡,我只是碰巧最熟悉jQuery。例如,您可以在jQuery中执行类似以下的操作:
$('img').click(function () { // Do some stuff return false;// <- Cancels bubbling to parent elements. });
omqzjyyz2#
Darit是正确的,你需要停止事件冒泡(传播):
function imgEventHandler(e) { // ^notice: pass 'e' (W3C event) // W3C: e.stopPropagation(); // IE: if (window.event) { window.event.cancelBubble = true; } }
ajsxfq5m3#
在图像的事件处理程序中
event.cancelBubble = true;
然后在最后
return false;
3条答案
按热度按时间soat7uwm1#
您遇到的问题称为事件冒泡。图像的单击事件冒泡到该节点的所有父元素。您希望取消冒泡。
最好的方法是使用一个JavaScript框架,它可以在所有的浏览器上工作。jQuery有一个非常简单的方法来完成这个任务。其他框架也有类似的机制来取消冒泡,我只是碰巧最熟悉jQuery。
例如,您可以在jQuery中执行类似以下的操作:
omqzjyyz2#
Darit是正确的,你需要停止事件冒泡(传播):
ajsxfq5m3#
在图像的事件处理程序中
然后在最后