javascript - 仅在内部元素上调用事件监听器(Javascript)

Question

这个问题已经有答案了:

jQuery how to execute event only on the inner element (3 个回答)

已关闭 5 年前。

我有一个div在另一个里面div 。两者都附加了事件监听器来在 mousedown 上运行函数 - 称它们为 outerDivFunction和innerDivFunction 。当我点击内部div时，两个函数都被调用；我希望它只调用 innerDivFunction 。

如何做到这一点？ (Vanilla 解决方案优于 jQuery。)

Answer 1

在innerDivFunction中使用事件的stopPropagation()。这可以防止当前事件在捕获和冒泡阶段进一步传播。

了解更多详情:Event Propagation

function outerDivFunction(){
  alert('Outer Div');
}

function innerDivFunction(e){
  e.stopPropagation();
  alert('Inner Div');
}

.outer{
  border: 1px solid blue;
}
.inner{
  border: 1px solid red;
  margin: 10px;
}

<div class="outer" onclick="outerDivFunction()">Outer Div
  <div class="inner" onclick="innerDivFunction(event)">Inner Div</div>
</div>