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
Eine Falle und Lösung bei der Verwendung von fileReader
Inhaltsverzeichnis Eine Falle bei fileReader Fall...
Der Unterschied zwischen HTML-Iframe und Frameset_PowerNode Java Academy
Einführung 1. <iframe>-Tag: Ein Iframe ist ...
Ubuntu E: Sperre /var/lib/dpkg/lock-frontend konnte nicht abgerufen werden – offen (11: Ressource vorübergehend nicht verfügbar)
Ubuntu 18.04, andere Versionen von Ubuntu Frage: ...
Lösung für den Fall, dass der Tomcat-Server tomcat7w.exe nicht öffnen kann
Beim Konfigurieren des Tomcat-Servers ist mir heu...
So autorisieren Sie Remoteverbindungen in MySQL unter Linux
Hinweis: Andere Maschinen (IP) können ohne Autori...
Konfigurationsmethode für die VMware Kali-Umgebung virtueller Maschinen
1|0 Kompilieren Sie den Kernel (1) Führen Sie den...
Verwenden von System.Drawing.Common in Linux/Docker
Vorwort Nachdem das Projekt auf .net Core migrier...
Gegenfall für die Vue-Implementierung
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der Docker-Container-Cross-Host-Multi-Netzwerksegment-Kommunikationslösung
1. MacVlan Es gibt viele Lösungen, um eine netzwe...
Docker-Compose erstellt eine Brücke, fügt ein Subnetz hinzu und löscht eine Netzwerkkarte
1. Erstellen Sie eine Docker-Netzwerkkarte [root@...
Allgemeine Betriebsbefehle von MySQL im Linux-System
Aufschlag: # chkconfig --list Alle Systemdienste ...
Tutorial zur Verwendung von Profilen in MySQL
Was ist ein Profil? Wir können es verwenden, wenn...
Beispiel für die Konvertierung von JavaScript-Datentypen (Konvertieren anderer Typen in Zeichenfolgen, numerische Typen und Boolesche Typen)
Vorwort Was ist Datentypkonvertierung? Der Standa...
MySQL 5.7.10 Installationsdokumentation Tutorial
1. Installieren Sie Abhängigkeitspakete yum -y in...
JavaScript-Implementierung eines einfachen Additionsrechners
In diesem Artikelbeispiel wird der spezifische Ja...