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

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

1 个答案: