如何防止子事件中的代码执行父元素事件

Question

我标题中的问题可能看起来含糊。我为这个问题画了一个例子：

container.onclick = () => {
  alert(0);
};
content.onclick = () => {
  alert("how  can I prevent here appearance alert(0) from parent element event?");
  //how can I prevent parent event by content clicked?
};

#container{
  height: 100px;
  background-color: gray;
}
#content{
  height: 50px;
  width: 150px;
  background-color: green;
}

<div id="container">
  
  <div id="content"></div>
  
</div>k

这是一个简单的示例。在一个真实的项目中，我无法将这两个事件合并为一个事件，因为第一个事件是通过编程方式分配到我框架的肠子中的某个位置，因此不应在单击内容后将其从EventListener中删除

通常，是否可以通过单击DOM层来以某种方式中断调用链事件的执行？我试图这样做：

content.onclick = () => {
  alert("how  can I prevent here appearance alert(0) from parent element event?");
  e.preventDefault();
  return false;
  //how can I prevent parent event by content clicked?
};

但是，这当然没有成功

Answer 1

为此，您可以像这样使用js的stop propogation

<div id="container">
 <div id="content" onclick="event.stopPropagation();">
 </div>  
</div>

因此，当您单击内容时，它不会仅触发容器事件。

Answer 2

您应通过依赖注入将event传递给特定方法（content.onclick），然后停止其传播。

container.onclick = () => {
  alert(0);
};
content.onclick = (e) => {
  e.stopPropagation();
  alert("Voilà, this prevent that appears alert(0) from parent element event.");
};

#container{
  height: 100px;
  background-color: gray;
}
#content{
  height: 50px;
  width: 150px;
  background-color: green;
}

<div id="container">
  
  <div id="content"></div>
  
</div>