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
How to use VirtualBox to build a local virtual machine environment on Mac
1. Big Data and Hadoop To study and learn about b...
Vue implements simple data two-way binding
This article example shares the specific code of ...
Workerman writes the example code of mysql connection pool
First of all, you need to understand why you use ...
Detailed explanation of primary keys and transactions in MySQL
Table of contents 1. Comments on MySQL primary ke...
Steps to build MHA architecture deployment in MySQL
Table of contents MAH 1. Introduction to MAH Arch...
Process analysis of deploying ASP.NET Core applications on Linux system Docker
Table of contents 1. System environment 2. Operat...
Two ways to enable firewall in Linux service
There are two ways: 1. Service method Check the f...
Correct way to load fonts in Vue.js
Table of contents Declare fonts with font-face co...
One line of code solves various IE compatibility issues (IE6-IE10)
x-ua-compatible is used to specify the model for ...
How to use Axios asynchronous request API in Vue
Table of contents Setting up a basic HTTP request...
Sublime / vscode quick implementation of generating HTML code
Table of contents Basic HTML structure Generate s...
Solution to mysql failure to start due to insufficient disk space in ubuntu
Preface Recently, I added two fields to a table i...
How to update, package, and upload Docker containers to Alibaba Cloud
This time, we will try to package the running con...
Detailed explanation of the process of building an MQTT server using Docker
1. Pull the image docker pull registry.cn-hangzho...
CSS3 radar scan map sample code
Use CSS3 to achieve cool radar scanning pictures:...