如何防止 HTML 中的事件從子元素傳播到父元素？

使用內聯Onclick 事件監聽器防止事件傳播

在HTML 中，內聯事件監聽器允許我們直接在元素的標籤內添加事件處理。然而，有時我們會遇到子元素的事件不應該觸發父元素的事件的情況。

問題：

考慮以下程式碼：

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

在此程式碼片段中，當使用者點擊span 時，span 的點擊事件和div的點擊事件都會發生

解決方案：

要停止從span 到div 的事件傳播，我們可以使用event.stopPropagation() 方法：

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

透過呼叫event.stopPropagation()，我們阻止事件向上冒泡到父元素，有效地將點擊事件與父元素隔離span.

IE 的替代方案：

對於不支援event.stopPropagation() 的舊版Internet Explorer，我們可以使用window.event.cancelBubble = true:

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

此方法透過明確取消事件來達到相同的結果傳播。

以上是如何防止 HTML 中的事件從子元素傳播到父元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！