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

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()，则此更改会在侦听器 returns 时撤消。这允许复选框事件处理程序测试复选框的新状态，并允许文本输入上的键盘事件处理程序测试包含新输入的值。

它在您使用键盘时起作用的原因是 click 事件是一个高级事件，它包含单击复选框的所有不同方式：您可以使用鼠标来完成，使用它们是键盘，带有触摸屏等。如果您想听特定的点击模式，则必须使用 mousedown、keypress 等

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

Canceling checkbox's click event prevents checking it?

html

javascript

checkbox

dom-events

preventdefault