点击内嵌按钮时如何阻止父元素onclick绑定的alertOuter函数执行？

这是典型的事件冒泡导致的问题——当你点击按钮时，事件会从按钮本身向上冒泡到父级的<div>元素，所以两个onclick都会被触发。要只执行alertInner，我们只需要阻止事件继续向上传播就行，具体有两种简单的实现方式：

方式一：在函数内处理事件对象 #

修改你的JavaScript函数，让它接收事件参数并调用stopPropagation()：

function alertOuter() { alert("outer alert") }
function alertInner(event) { 
  // 阻止事件冒泡到父元素
  event.stopPropagation();
  alert("inner alert"); 
  return; 
}

然后更新HTML里的按钮，把event对象传递给函数：

<div onclick="alertOuter()" style="padding:20px;background:red;">
  <h1>Outer</h1>
  <br/>
  <button onclick="alertInner(event)">Inner</button>
</div>

方式二：直接在inline onclick中阻止冒泡 #

如果你不想修改函数，也可以直接在按钮的onclick属性里添加阻止冒泡的逻辑：

<div onclick="alertOuter()" style="padding:20px;background:red;">
  <h1>Outer</h1>
  <br/>
  <button onclick="alertInner(); event.stopPropagation();">Inner</button>
</div>

原理说明 #

event.stopPropagation()方法会阻止当前事件向DOM树的上层元素传播，这样父级<div>的onclick事件就不会被触发了。这种方法适用于你用inline事件绑定的场景，完全不需要改变原有的代码结构。

内容的提问来源于stack exchange，提问作者soubhagya pradhan