重叠项目上的点击事件答案

【问题标题】：Click events on overlapping items重叠项目上的点击事件
【发布时间】：2010-12-16 06:40:30
【问题描述】：

我有

带有点击事件的表格行
带有点击事件的按钮，该按钮在表格行上

我有问题。当我点击按钮时，行点击事件也会执行，但我不想要这种行为。我只想要按钮点击执行，没有行点击。

【问题讨论】：

标签： javascript jquery events onclick buttonclick

【解决方案1】：

使用 jQuery（由于问题标签）：

$('#yourButton').click(function(e) {
    // stop event from bubbling up to row element
    e.stopPropagation();

    // now do your stuff
});

【讨论】：

【解决方案2】：

看看你的代码，这是你在按钮点击事件中应该做的事情 stopPropagation

【讨论】：

【解决方案3】：

你可以在点击时调用一个额外的函数

这是函数：

function cancelBubble(e){

    e.cancelBubble = true;
    if(e.stopPropagation)
     e.stopPropagation();
}

而按钮的onClick可以这样写

onclick="yourfunctionname();cancelBubble(event)"

yourfunctionname:: 是您正在调用的函数的名称。

【讨论】：

【解决方案4】：

还有我有一个覆盖在可点击元素上的下拉菜单。因此，只需使用以下内容来防止传播到所有现代浏览器的底层元素

onclick="yourfunctiontohandle();event.stopPropagation();"

对于较旧的跨浏览器解决方案，必须使用 IE event.cancelBubble

onclick="if(event.stopPropagation) event.stopPropagation(); else event.cancelBubble=true;"

【讨论】：

【解决方案5】：

由于不推荐使用全局事件，如果有人想使用纯 javascript，这是停止传播的方法

document.querySelector("#outer").addEventListener('click', e => {console.log('Outer div clicked')});
document.querySelector("#inner").addEventListener('click', e => {console.log('Inner div clicked'); e.stopPropagation()});

<div id="outer" style="width: 100px; height: 100px; background-color: red; display: flex; justify-content: center; align-items: center;">
    <div id="inner" style="background-color: black; width: 50px; height: 50px;"></div>
</div>

点击红色和黑色方块查看结果

【讨论】：