Use DIV mask to solve the problem that directly checking the checkbox with the mouse is invalid
|
During the front-end development process, a situation occurred where a check box was required. For the convenience of user operation, the click event was placed on the DIV. (knockout.js is used in this) The code is roughly as follows: Copy code The code is as follows:<div id="one" data-bind="click:clickevent"> <input type="checkbox"><span>Please check me if you have any questions</span> </div> But a strange phenomenon occurred when writing it this way. Everything was normal when clicking the div with the mouse. But it is not normal to directly check the checkbox with the mouse: The checkbox is in the unchecked state. Click the checkbox with the mouse to check it. What should be achieved at this time is: 1. Execute the clickevent event of div; 2. After the event is executed, the checkbox is in the checked state. But the end result is that the checkbox is still unchecked. The result of tracking and debugging is that when the clickevent event is executed, the checkbox is still in the checked state, but after the clickevent is executed, the jquery code is executed, and after two or three steps, the checkbox is changed to the unchecked state. The reason has not been found yet. (A similar situation also occurs with the radiobox used in another place) There is no other way, so I have to work around it. I cover the checkbox with a div so that when the mouse clicks, it clicks the div instead of the checkbox, and changes the checkbox state through clickevent (the clickevent already has code to change the checkbox state) The implementation is as follows: Copy code The code is as follows:<div id="one"> <div id="two" data-bind="click:clickevent"></div> <div id="three"> <input type="checkbox"/> <span>Please check me if you have any questions</span> </div> </div> The two divs with IDs two and three need to set two properties: position: absolute; z-index: 1; The z-index attribute of the div on the upper layer is larger than that of the div on the lower layer. The ID attribute of DIV above is just for illustration. Generally, the class attribute is used in the program. |
<<: Detailed explanation of the code for implementing linear gradients with CSS3
>>: MYSQL's 10 classic optimization cases and scenarios
Recommend
Vue.js performance optimization N tips (worth collecting)
Table of contents Functionalcomponents Childcompo...
Implementation of MySQL Shell import_table data import
Table of contents 1. Introduction to import_table...
Detailed explanation of MySQL master-slave database construction method
This article describes how to build a MySQL maste...
Detailed tutorial on installing Docker on Windows
Since my local MySQL version is relatively low, I...
MySQL uses aggregate functions to query a single table
Aggregate functions Acts on a set of data and ret...
mysql5.7.21.zip installation tutorial
The detailed installation process of mysql5.7.21 ...
Solve the problem that changes to the Docker MySQL container database do not take effect
Using the official MySQL image requires some modi...
Detailed explanation of the process of docker packaging Python environment
The steps of docker packaging Python environment ...
Vue implements small notepad function
This article example shares the specific code of ...
The correct way to migrate MySQL data to Oracle
There is a table student in the mysql database, i...
Methods and steps for Etcd distributed deployment based on Docker
1. Environmental Preparation 1.1 Basic Environmen...
A brief discussion on simulating multi-threaded and multi-process crashes in Linux
Conclusion: In a multithreaded environment, if on...
MySQL data migration using MySQLdump command
The advantages of this solution are simplicity an...
Detailed explanation of incompatible changes in rendering functions in Vue3
Table of contents Rendering API changes Render fu...
Examples of using html unordered list tags and ordered list tags
1. Upper and lower list tags: <dl>..</dl...