Verwenden Sie eine DIV-Maske, um das Problem zu lösen, dass das direkte Aktivieren des Kontrollkästchens mit der Maus ungültig ist
|
Während des Front-End-Entwicklungsprozesses trat eine Situation auf, in der ein Kontrollkästchen erforderlich war. Zur Vereinfachung der Benutzerbedienung wurde das Klickereignis auf dem DIV platziert. (hierbei wird knockeout.js verwendet) Der Code sieht ungefähr so aus: Code kopieren Der Code lautet wie folgt:<div id="eins" data-bind="Klick:Klickereignis"> <input type="checkbox"><span>Bitte melden Sie sich bei mir, wenn Sie Fragen haben</span> </div> Allerdings trat bei dieser Schreibweise ein merkwürdiges Phänomen auf. Beim Anklicken des Div mit der Maus war alles normal. Es ist jedoch nicht üblich, das Kontrollkästchen direkt mit der Maus zu aktivieren: Das Kontrollkästchen ist nicht aktiviert. Klicken Sie mit der Maus auf das Kontrollkästchen, um es zu aktivieren. Zu diesem Zeitpunkt sollte Folgendes erreicht werden: 1. Führen Sie das Clickevent-Ereignis von div aus. 2. Nachdem das Ereignis ausgeführt wurde, ist das Kontrollkästchen aktiviert. Das Endergebnis ist jedoch, dass das Kontrollkästchen weiterhin deaktiviert ist. Das Ergebnis der Verfolgung und des Debuggens besteht darin, dass sich das Kontrollkästchen bei Ausführung des Clickevent-Ereignisses noch im aktivierten Zustand befindet. Nach der Ausführung des Clickevents wird jedoch der jQuery-Code ausgeführt und das Kontrollkästchen nach zwei oder drei Schritten in den deaktivierten Zustand geändert. Der Grund konnte noch nicht gefunden werden. (Eine ähnliche Situation gibt es auch bei der an anderer Stelle verwendeten Radiobox) Es gibt keinen anderen Weg, also muss ich es umgehen. Ich bedecke das Kontrollkästchen mit einem Div, sodass beim Klicken der Maus nicht das Kontrollkästchen, sondern das Div angeklickt wird und der Status des Kontrollkästchens durch das Clickevent geändert wird (das Clickevent enthält bereits Code zum Ändern des Status des Kontrollkästchens). Die Implementierung ist wie folgt: Code kopieren Der Code lautet wie folgt:<div id="eins"> <div id="zwei" data-bind="click:clickevent"></div> <div id="drei"> <input type="checkbox"/> <span>Bitte melden Sie sich bei mir, wenn Sie Fragen haben</span> </div> </div> Die beiden Divs mit den IDs zwei und drei müssen zwei Eigenschaften festlegen: Position: absolute; Z-Index: 1; Das Z-Index-Attribut des Div auf der oberen Ebene ist größer als das des Div auf der unteren Ebene. Das ID-Attribut von DIV oben dient nur zur Veranschaulichung. Im Allgemeinen wird im Programm das Klassenattribut verwendet. |
<<: Detaillierte Erklärung des Codes zur Implementierung linearer Farbverläufe mit CSS3
>>: Die 10 klassischen Optimierungsfälle und -szenarien von MySQL
Artikel empfehlen
Mit JS in zehn Minuten die Existenz von Elementen in einem Array bestimmen
Vorwort In der Front-End-Entwicklung müssen Sie h...
Vue+el-table realisiert das Zusammenführen von Zellen
In diesem Artikelbeispiel wird der spezifische Co...
Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0
Object.defineProperty verstehen Grammatik: Object...
Verwenden Sie ein Shell-Skript, um die Python3.8-Umgebung in CentOS7 zu installieren (empfohlen)
Ausführung mit nur einem Klick Um Python 3.8 in e...
Anweisungen zur Verwendung der MySQL-IndexOF-Funktion
Wie unten dargestellt: LOCATE(Teilzeichenfolge,Ze...
So verwenden Sie eine Karte, um die domänenübergreifende Nutzung mehrerer Domänennamen in Nginx zu ermöglichen
Die übliche Nginx-Konfiguration ermöglicht domäne...
Zusammenfassung der sieben grundlegenden XHTML-Codierungsregeln
1. Alle Tags müssen ein entsprechendes End-Tag hab...
Lösung für PHP, das nach Abschluss der Nginx-Installation nicht analysiert werden kann
Inhaltsverzeichnis Methode 1 Methode 2 Nach der I...
Lösungen für MySQL-Batch-Insert- und eindeutige Indexprobleme
MySQL-Batch-Einfügeproblem Da bei der Entwicklung...
Verwenden Sie das NJS-Modul, um JS-Skripte in die Nginx-Konfiguration einzuführen
Inhaltsverzeichnis Vorwort 1. NJS-Modul installie...
Mehrere Möglichkeiten für Vue, die Kommunikation zwischen Komponenten zu erreichen (mehrere Szenarien)
Inhaltsverzeichnis 1. Requisiten Übergeordnetes E...
Linux Yum-Paketverwaltungsmethode
Einführung yum (Yellow dog Updater, Modified) ist...
Zusammenfassung ungewöhnlicher Operatoren und Operatoren in js
Zusammenfassung gängiger Operatoren und Operatore...
Fehler beim reduzierten Tabellenzeilenelement
Nehmen wir ein Beispiel: Der Code ist sehr einfach...
Detaillierte Erläuterung der Vue-Formularbindung und -Komponenten
Inhaltsverzeichnis 1. Was ist bidirektionale Date...