取消复选框的单击事件阻止检查它？

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等。