Javascript點擊事件觸發兩次

Question

在以下代碼段中，為什么divClicked()在單擊<label>時觸發兩次，而在單擊<input>時僅觸發一次？

 function divClicked(_index) { console.log("div click event"); } function inputClicked(_index) { console.log("input click event"); }

 <div class="option" onclick="divClicked(1)"> <input id="1_1" name="group_1" type="radio" value="1" onclick="inputClicked(1)" /> <label for="1_1">label</label> </div>

注意：我想知道為什么會發生這種情況，而不是“快速修復”，例如：將 onclick() 放在 label 上。

Answer 1

這是因為 HTML 規范在4.10.4 中的描述：

例如，在單擊復選框標簽檢查復選框的平台上，單擊以下代碼段中的label可能會觸發用戶代理在input元素上運行合成點擊激活步驟，就好像元素本身已被用戶觸發一樣：

 <label><input type=checkbox name=lost> Lost</label>

在其他平台上，行為可能只是為了集中控制，或者什么都不做。

這意味着當點擊<label> ，瀏覽器會在關聯的<input>元素上創建第二個“合成”點擊事件，以切換其狀態。

divClicked被觸發兩次的原因是因為來自<label>的第一個事件冒泡到<div> ，第二個合成點擊事件冒泡到<div> 。

Answer 2

這通常是click事件bubbling原理的原因：

當一個事件發生在一個元素上時，它會在它、它的關聯元素、它的父元素和其他祖先元素上運行。

現在，關系是當您單擊label ，有兩個事件會在此處冒泡：

1）點擊div（你期望的）

2）點擊輸入（這也是預期的）

2.1) 當點擊input被觸發時，這里也會再次觸發對div點擊

您可以使用event.bubbles道具確認此行為。

編輯：

label和input之間連接的原因:(我知道這絕對不是必需的，因為它無處不在）

<label>可以通過將控件element inside the <label>元素內or by using the for屬性與控件相關聯。 這樣的控件稱為標簽元素的標記控件。 一個輸入可以與多個標簽相關聯。

摘自：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

這意味着在標簽上放置for引用輸入元素的id將刺激行為，就好像元素在label 。 這會將input上的事件bubble到label就像child到parent任何事件一樣

Answer 3

在某些時候，還要檢查 javascript 文件資產是否沒有加載兩次......它不應該發生，但你永遠不知道。