Как я могу предотвратить выполнение события родительского элемента из кода внутри дочернего события

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

Вы должны передать событие путем внедрения зависимости в указанный метод c ( 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>

Answer 2

Для этого вы можете использовать stop propogation из js вот так

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

Так что при нажатии на контент он не будет вызывать только событие контейнера.