Verwenden Sie die DIV-Maske, um das Problem ungültiger Kontrollkästchen zu lösen, die direkt bei der Erstellung von maus_HTML/Xhtml_Webseiten ausgewählt werden

Während des Front-End-Entwicklungsprozesses bin ich auf eine Situation gestoßen, die überprüft werden musste. Aus Gründen der Benutzerfreundlichkeit wurde das Klickereignis auf dem DIV platziert. (Knockout.js wird verwendet)

Der Code sieht ungefähr wie folgt aus:

Code kopieren

Der Der Code lautet wie folgt:

<div id="one" data-biind="click:clickevent"><input type="checkbox"><span> Bitte überprüfen Sie mich, wenn Sie Fragen haben.
</div> Es gibt jedoch ein seltsames Phänomen, wenn das Schreiben mit der Maus einwandfrei funktioniert.

Aber es ist nicht normal, das Kontrollkästchen direkt mit der Maus zu aktivieren:

Das Kontrollkästchen befindet sich in einem nicht aktivierten Zustand und die Maus klickt direkt auf das Kontrollkästchen, um Folgendes zu aktivieren Folgendes sollte erreicht werden: 1. Führen Sie das Clickevent-Ereignis des Div aus. 2. Nachdem das Ereignis ausgeführt wurde, befindet sich das Kontrollkästchen im aktivierten Zustand.

Aber das Endergebnis ist, dass das Kontrollkästchen immer noch deaktiviert ist.

Das Tracking- und Debugging-Ergebnis ist, dass sich das Kontrollkästchen bei der Ausführung des Clickevent-Ereignisses immer noch im aktivierten Zustand befindet, nach der Ausführung des Clickevents jedoch die Ausführung des JQuery-Codes erfolgt Das Kontrollkästchen wird in den Status „Nicht ausgewählt“ geändert.

Der Grund wurde noch nicht gefunden. (Die an einer anderen Stelle verwendete Radiobox hat eine ähnliche Situation)

Es gibt keine andere Möglichkeit, als dies zu umgehen, indem das Kontrollkästchen mit einer Div-Ebene abgedeckt wird, sodass beim Klicken mit der Maus auf das Div geklickt wird Anstelle des Kontrollkästchens. Durch clickevent Ändern Sie den Kontrollkästchenstatus (es gibt Code zum Ändern des Kontrollkästchenstatus im Clickevent-Ereignis)

wird wie folgt implementiert:





Code kopieren

Der Code lautet wie folgt: <div id="one"><div id="two " data-bind="click:clickevent">< /div>

<div id="two">

<input type="checkbox"/> <span>Bitte ankreuzen Ich, wenn Sie Fragen haben.

</div>


Zwei Divs mit den IDs zwei und drei Legen Sie zwei Attribute fest: position:absolute; z-index:1;

Das Z-Index-Attribut des Div auf der oberen Ebene ist größer als das Div auf der unteren Ebene.

Das ID-Attribut des obigen DIV dient nur zur Veranschaulichung. In allgemeinen Programmen wird das Klassenattribut verwendet, um es festzulegen.