防止點擊 label 觸發子按鈕

Question

當像這樣設置時，單擊具有子按鈕的 label 會觸發按鈕的 onclick 事件：

 function fireButton() { console.log("Button fired;"); }

 <label>Label <button onclick="fireButton()">Button</button> </label>

有沒有辦法防止這種情況？

Answer 1

添加for屬性為label。

 function fireButton() { console.log("Button fired;"); }

 <label for=''>Label <button onclick="fireButton()">Button</button> </label>

Answer 2

您可以將按鈕放在 label 之外

<label>Label</label>
<button onclick="fireButton()">Button</button>

Answer 3

您可以為標簽添加 preventDefault 並保留現有代碼：

document.querySelector("label").addEventListener("click", function(event) { 
    event.preventDefault();
}, false);

Answer 4

您可以使用不同的標簽，例如<span>而不是label但是如果您真的需要使用<label> ，您應該阻止 label onclick()的默認行為，如下所示：

 function fireButton(){ //add actions here } function preventDefault(event){ event.preventDefault() }

 <label onclick="preventDefault(event)">Label <button onclick="fireButton()">Button</button> </label>

Answer 5

這是 CSS 中的一種方法，當單擊 label 時，它也禁用觸發button的:active label 。 覆蓋label的onClick事件不會這樣做。

label {
  pointer-events: none;
}
    
button {
  pointer-events: initial;
}