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
Funktionen in TypeScript
Inhaltsverzeichnis 1. Funktionsdefinition 1.1 Fun...
Einführung in Linux-Komprimierungs- und Dekomprimierungsbefehle
Inhaltsverzeichnis Gängige Komprimierungsformate:...
Linux /etc/network/interfaces Konfigurationsschnittstellenmethode
Die Datei /etc/network/interfaces wird in Linux z...
Installations-Tutorial für mysql8.0rpm auf centos7
Laden Sie zunächst das Diagramm herunter 1. Deins...
Docker-Benutzerdefinierte Brücke Docker0 und Befehlsvorgänge zum Öffnen, Schließen und Neustarten von Docker
Frage Nachdem das Unternehmen den Server migriert...
JavaScript zum Wechseln zwischen mehreren Bildern
In diesem Artikel wird der spezifische JavaScript...
So löschen Sie eine Eigenschaft eines Objekts in JavaScript
1. löschen delete ist die einzige wirkliche Mögli...
So optimieren Sie Bilder, um die Website-Leistung zu verbessern
Inhaltsverzeichnis Überblick Was ist Bildkomprimi...
Installationsanleitung für MySQL 5.7.19 unter Windows 10 So ändern Sie das Root-Passwort von MySQL, nachdem Sie es vergessen haben
Nehmen Sie als Beispiel die Installation von MySQ...
MySQL verwendet frm-Dateien und ibd-Dateien, um Tabellendaten wiederherzustellen
Inhaltsverzeichnis Einführung in FRM-Dateien und ...
Mysql-Operation zum Abrufen von Tabellenkommentarfeldern
Ich werde nicht viel Unsinn erzählen, schauen wir...
Implementierung zum Hinzufügen eines Maskenebeneneffekts, wenn die CSS-Maus über dem Bild schwebt
Erster Blick auf die Wirkung: Wenn die Maus über ...
Einführung in semantische XHTML-Tags
Der erste Punkt ist, dass Menschen die Semantik vo...
MySQL-Abfragemethode mit mehreren Bedingungen
MySQL-Abfrage mit mehreren Bedingungen Umgebung: ...
Baidu Input Method öffnet API und behauptet, es könne portiert und nach Belieben verwendet werden
Der zuständige Verantwortliche für Baidu Input Met...