取消复选框的点击事件会阻止检查它吗？

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