Using div mask to solve the problem of invalid checkbox directly checked by mouse

Time:2019-11-28

In the process of front-end development, there is a situation that needs to be checked. For the convenience of user operation, click event is put on Div. (knockout.js is used)

The code is roughly as follows:

Copy code

The code is as follows:

<div data-biind=”click:clickevent”>
< input type = “checkbox” > < span > please check me if you have something</span>
</div>

But there is a strange phenomenon in this writing. It’s normal to click on div with the mouse.

But it is not normal to directly check the checkbox with the mouse:

When the checkbox is in the unchecked state, click the checkbox directly to check. At this time, it should be implemented as follows: 1. Execute the click event of div; 2. After the event is executed, the checkbox is in the checked state.

But the final 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 code of jQuery is executed. After two or three steps, the checkbox is changed to the unchecked state.

The cause has not been found. (there is a similar situation for the Radiobox used in another place.)

There’s no way, we can only change it. By covering a layer of div on the checkbox, let the mouse click on the div instead of the checkbox, and change the checkbox state through clickevent (there is a code to change the checkbox state in the clickevent event)

The implementation is as follows:

Copy code

The code is as follows:

<div>
<div data-bind=”click:clickevent”></div>
<div>
< input type = “checkbox” / > < span > please check me if you have something</span>
</div>
</div>

For two divs with ID two and three, the key is to set two attributes: position: absolute; Z-index: 1;

The Z-index attribute of the div in the upper layer is larger than that in the lower layer.

The above div ID attribute is just for illustration. In general, the class attribute is used in the program.