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
Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini
Navicat meldet beim Verbinden mit der Datenbank d...
Tutorial zur Installation von MySQL 5.6 mit RPM in CentOS
Alle vorherigen Projekte wurden in der Windows-Sy...
Nginx-Anti-Crawler-Strategie, um UA am Crawlen von Websites zu hindern
Anti-Crawler-Richtliniendatei hinzugefügt: vim /u...
HTML-Tutorial: Horizontales Liniensegment in HTML
<br />Dieses Tag kann eine horizontale Linie...
Mybatis-Statistiken zur Ausführungszeit jeder SQL-Anweisung
Hintergrund In letzter Zeit werde ich in Intervie...
Implementieren eines Webplayers mit JavaScript
Heute zeige ich Ihnen, wie Sie mit JavaScript ein...
Grundlegende Verwendung des Befehls wget unter Linux
Inhaltsverzeichnis Vorwort 1. Laden Sie eine einz...
Nginx-Proxy-Axios-Anforderung und Vorsichtsmaßnahmen
Vorwort Ich habe vor kurzem eine kleine Demo gesc...
Hast du genau verstanden Schlagworte Definition Verwendung
Vorwort : Heute wurde ich gefragt: „Haben Sie das ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22
Dieser Artikel dokumentiert die Installation und ...
Detailliertes Verständnis der Vue-Methode zum Generieren von QR-Codes mit vue-qr
Inhaltsverzeichnis npm herunterladen Schritt (1) ...
Grundlegendes zur CSS-Eigenschaft „transform-origin“
Vorwort Ich habe vor kurzem eine Feuerwerksanimat...
jQuery implementiert Formularvalidierungsfunktion
Beispiel für die Validierung eines jQuery-Formula...
Verwenden von CSS3 zum Implementieren eines Schriftfarbverlaufs
Beim Verwenden von Animation.css habe ich festges...
Kurze Analyse des MySQL B-Tree-Index
B-Baum-Index Verschiedene Speicher-Engines können...