仅在内部元素上调用侦听器(JavaScript)

Question

我在另一个div中有一个div。两者都附有事件侦听器，可以在Mousedown上运行一个功能 - 将其称为outerDivFunction和innerDivFunction。当我单击内部div时，调用两个功能；我希望它只调用innerDivFunction。

如何做？（香草解决方案优于jQuery。）

Answer 1

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

有关更多详细信息：事件传播

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>