取消複選框的單擊事件阻止檢查它？

Question

我需要有一個複選框列表，條件是至少必須檢查其中的一個。
以下代碼會產生該效果。

document.querySelector('div').addEventListener('click', function(evt){ 
 
    if(this.querySelectorAll('input:checked').length == 0) 
 
     evt.preventDefault() ; 
 
}) ;

<div> 
 
    <input type=checkbox checked> 
 
    <input type=checkbox> 
 
    <input type=checkbox> 
 
</div>

這很好，不過，我不明白爲什麼這段代碼更有效。

首先，我在點擊事件上做了一個.preventDefault()，只有在檢查了沒有複選框選中的條件後。因此取消點擊事件應該沒有什麼區別。

其次，即使您嘗試使用鍵盤檢查複選框，代碼仍然有效，這完全是奇怪的，因爲我只取消單擊事件。

請解釋爲什麼代碼的工作方式。

Answer 1

當輸入事件偵聽器正在運行時，其對元素狀態的影響實際上已經執行。如果調用event.preventDefault()，則在偵聽器返回時此更改將被撤消。這允許複選框事件處理程序測試複選框的新狀態，並允許文本輸入上的鍵盤事件處理程序測試包含新輸入的值。

當您使用鍵盤時，它的工作原理是click事件是一個高級別的事件，其中包含點擊複選框的所有不同方法：您可以使用鼠標，鍵盤，帶有觸摸屏等。如果你想聽特定的點擊模式，你將不得不使用mousedown，keypress等。