當一個 `label` 元素包含一個子 `span` 時，點擊標簽會觸發子元素而不是父元素

Question

在此示例中，我創建了一個帶有標題的標簽組，並嘗試將一個點擊偵聽器附加到每個標簽； 我最終希望在每個label都有一個input ，但沒有必要說明我不理解的行為。

根據我是否將標簽文本包裝在span標簽中，我看到了不同的行為：

• 當單擊沒有子span的標簽時，事件處理程序會按我的預期在label元素上調用一次。
• 當單擊帶有子span的標簽時，事件處理程序仍然只調用一次，但這次是針對子span而不是父label 。

我本來希望在第二種情況下，事件處理程序觸發兩次：一次是針對父label ，一次是針對子span 。 有人可以解釋為什么添加這個span元素似乎會阻止事件處理程序傳播到父label嗎？

 var settingsGroup = document.getElementById("settings"); settingsGroup.querySelectorAll('.setting').forEach(function(setting) { var options = setting.querySelectorAll('label'); options.forEach(function(option) { option.addEventListener("click", function(ev) { console.log(`${this.id} clicked: ${ev.target.tagName}`); }); }); });

 <div id="settings"> <div class="setting" role="group"> <div id="header"> <em> A setting </em> </div> <label id="option-a"> Option A </label> <label id="option-b"> <span> Option B </span> </label> </div> </div>

Answer 1

這是正常的。 e.target是，這是該事件的目標（該元件span中的情況下<label><span>...</span></label> 。所述事件的目標是span ，然后將事件傳播（氣泡）到它的父label ，在那里它由您的事件處理程序處理。

如果你想在看label來代替，或者使用this ，你有id ，或使用e.currentTarget （事件當前遞送的元素）。

這個來自舊DOM3 事件規范的圖表對於理解事件流很方便：

Answer 2

您可以使用“pointer-events”CSS 指令來停止接收鼠標事件的 span HTML 元素。

span
{
    pointer-events: none;
}