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
Detailed explanation of two quick ways to write console.log in vscode
(I) Method 1: Define it in advance directly in th...
A brief discussion on read-only and disabled attributes in forms
Read-only and disabled attributes in forms 1. Rea...
jQuery implements shopping cart function
This article example shares the specific code of ...
Javascript combined with Vue to achieve automatic path finding for any maze image
Table of contents Preface Two-dimensional array, ...
Basic principles for compiling a website homepage
1. The organizational structure of the hypertext d...
Detailed explanation of MySQL joint query optimization mechanism
Table of contents MySQL federated query execution...
MySQL partitions existing tables in the data table
Table of contents How to operate Operation proces...
JavaScript to achieve lottery effect
This article shares the specific code of JavaScri...
Sample code for easily implementing page layout using flex layout
Without further ado, let's get straight to th...
Detailed explanation of Javascript basics loop
Table of contents cycle for for-in for-of while d...
Learn v-model and its modifiers in one article
Table of contents Preface Modifiers of v-model: l...
What is the difference between HTM and HTML? What is the difference between HTM and HTML?
In the process of learning web design, I did not ...
Let's talk about what JavaScript's URL object is
Table of contents Overview Hash Properties Host p...
Vue3 Vue Event Handling Guide
Table of contents 1. Basic event handling 2. Send...
Detailed explanation of the difference between device-width and width in CSS3 media queries
1.device-width Definition: Defines the screen vis...