Maison interface Web tutoriel HTML 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

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

May 16, 2016 pm 04:37 PM
div 遮罩

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.
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div Jan 30, 2023 am 09:23 AM

Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div

Implémentation d'un script de navigateur de traduction de marquage de mots basé sur l'API ChatGPT Implémentation d'un script de navigateur de traduction de marquage de mots basé sur l'API ChatGPT May 01, 2023 pm 03:28 PM

Implémentation d'un script de navigateur de traduction de marquage de mots basé sur l'API ChatGPT

Quelles sont les différences entre div et span ? Quelles sont les différences entre div et span ? Nov 02, 2023 pm 02:29 PM

Quelles sont les différences entre div et span ?

Quel est le modèle de boîte de division ? Quel est le modèle de boîte de division ? Oct 09, 2023 pm 05:15 PM

Quel est le modèle de boîte de division ?

Quelle est la différence entre iframe et div Quelle est la différence entre iframe et div Aug 28, 2023 am 11:46 AM

Quelle est la différence entre iframe et div

Comment afficher deux divs côte à côte Comment afficher deux divs côte à côte Nov 01, 2023 am 11:36 AM

Comment afficher deux divs côte à côte

Comment centrer un div en CSS Comment centrer un div en CSS Oct 12, 2023 am 10:07 AM

Comment centrer un div en CSS

Comment masquer le contenu CSS Div au-delà Comment masquer le contenu CSS Div au-delà Jan 28, 2023 pm 03:12 PM

Comment masquer le contenu CSS Div au-delà

See all articles