如何防止父元素事件從子事件中的代碼執行

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

您應該通過依賴注入將事件傳遞給特定方法 ( 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>