如何停止一個html元素可以收聽的所有事件？

Question

假設有div塊，該塊內有許多元素，它們將引發許多事件。 我不希望這些事件繼續冒泡，否則div塊之外的偵聽器可能會處理具有相同名稱的錯誤事件。 我可以在不聽大量事件並一一停止的情況下做到這一點嗎？

Answer 1

您必須分別監聽每個事件，並使用e.stopPropagation()停止傳播，其中e是事件對象。 無法同時收聽每個事件，除非您有非常特定的事件子集，否則我不會采用這種方法。

正確處理冒泡事件的最常見方法是驗證目標元素（ e.target ）並相應地忽略。

例如，您可以檢查e.target === e.currentTarget以了解事件是否來自孩子。

 var logEl = document.getElementById('log'); document.getElementById('parent').addEventListener('click', function (e) { log('event comes from child? ' + (e.target !== e.currentTarget)); }); function log(msg) { logEl.appendChild(document.createElement('br')); logEl.appendChild(document.createTextNode(msg)); } 

 #parent, #parent > div { padding: 20px; border: 1px solid red; } #parent { height: 100px; width: 200px; } 

 Click inside the boxes <div id="parent"> parent <div>child</div> </div> <div id="log"></div>