Utilisez le masque DIV pour résoudre le problème des cases à cocher non valides directement sélectionnées par la production de pages mouse_HTML/Xhtml_Web

Au cours du processus de développement front-end, j'ai rencontré une situation nécessitant une vérification. Pour la commodité des opérations de l'utilisateur, l'événement click a été placé sur le DIV. (Knockout.js est utilisé)

Le code est à peu près le suivant :

Copier le code

Le le code est le suivant :

<div id="one" data-biind="click:clickevent">
<input type="checkbox"><span> S'il vous plaît, vérifiez-moi si vous avez des questions&lt ;/span>
</div>

Mais il y a un phénomène étrange lorsque vous écrivez comme celui-ci.

Mais il n'est pas normal de cocher directement la case avec la souris :

La case à cocher est dans un état non coché, et la souris clique directement sur la case à cocher pour cocher ce qui suit. doit être réalisé : 1. Exécutez l'événement clickevent du div 2. , une fois l'événement exécuté, la case à cocher est cochée ;

Mais le résultat final est que la case n'est toujours pas cochée.

Le résultat du suivi et du débogage est que lorsque l'événement clickevent est exécuté, la case à cocher est toujours à l'état coché, mais après l'exécution de l'événement clickevent, l'exécution du code jquery est entrée après deux ou trois étapes. la case à cocher passe à l'état Non sélectionné.

La raison n'a pas encore été trouvée. (La radiobox utilisée à un autre endroit a une situation similaire)

Il n'y a pas d'autre moyen que de contourner ce problème en recouvrant la case à cocher avec une couche de div, de sorte que lorsque la souris clique, le div soit cliqué. au lieu de la case à cocher. Via clickevent Changer le statut de la case à cocher (il existe un code pour changer le statut de la case à cocher dans l'événement clickevent)

est implémenté comme suit :

Copier le code

Le code est le suivant :

<div id="one"> " data-bind="click:clickevent">< /div>
<div id="trois">
<input type="checkbox"/> <span>Veuillez cocher moi si vous avez des questions</span>
</div&gt ;
</div>

Deux divs avec les identifiants deux et trois. définissez deux attributs : position:absolute; z-index:1;

L'attribut z-index du div sur la couche supérieure est plus grand que le div sur la couche inférieure.

L'attribut ID du DIV ci-dessus est juste à titre d'illustration. Dans les programmes généraux, l'attribut class est utilisé pour le définir.