如何使用內嵌 onclick 屬性防止 HTML 中的事件傳播？

使用內聯 Onclick 屬性防止事件傳播

在 HTML 中處理事件時，通常需要控制事件如何透過 DOM 傳播。在管理可能共用事件偵聽器的巢狀元素時尤其如此。

考慮以下範例：

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

在這種情況下，

和（標頭）和元素具有內聯onclick 屬性，點擊時會顯示警報。預設情況下，按一下 元素將同時觸發 和和

事件，這可能不是所需的行為。

為了防止事件傳播並僅觸發 事件，我們需要阻止事件向上冒泡到父元素。這可以使用以下技術來實現：

使用event.stopPropagation()（現代瀏覽器）

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

使用window.event.cancelBubble (Internet Explorer)

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

透過新增這些到 的 onclick 屬性的行元素，我們阻止事件傳播到父

元素。元素，允許我們獨立處理每個元素的點擊事件。

以上是如何使用內嵌 onclick 屬性防止 HTML 中的事件傳播？的詳細內容。更多資訊請關注PHP中文網其他相關文章！