Annuler l'événement click de la case à cocher empêche de le vérifier?

Question

Je dois avoir une liste de cases à cocher avec la condition qu'au moins l'une d'elles doit être vérifiée.
Le code suivant produit cet effet.

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>

C'est bien, cependant, je ne comprends pas pourquoi ce code fonctionne même.

Tout d'abord, je fais un .preventDefault() sur l'événement, cliquez seulement après que je l'ai vérifié la condition que dit il n'y a pas vérifié les cases à cocher. Donc, l'annulation de l'événement click à ce stade ne devrait faire aucune différence.

Deuxièmement, le code fonctionne même si vous essayez de cocher les cases à l'aide du clavier, ce qui est totalement bizarre car je ne fais qu'annuler l'événement click.

Veuillez expliquer pourquoi le code fonctionne comme il le fait.

Answer 1

Lorsqu'un écouteur d'événement d'entrée s'exécute, son effet sur l'état de l'élément est déjà effectué. Si event.preventDefault() est appelée, cette modification est annulée lorsque l'écouteur renvoie. Cela permet à un gestionnaire d'événements de case à cocher de tester le nouvel état de la case à cocher et autorise le gestionnaire d'un événement clavier sur une entrée de texte à tester la valeur qui inclut la nouvelle entrée.

La raison pour laquelle cela fonctionne lorsque vous utilisez le clavier est que l'événement click est un événement de haut niveau qui englobe toutes les différentes façons de cliquer sur une case à cocher: vous pouvez le faire avec la souris, avec le clavier, avec écran tactile, etc. Si vous voulez écouter un mode de clic spécifique, vous devrez utiliser mousedown, keypress, etc.