Use DIV mask to solve the problem of invalid checkbox selection_html/css_WEB-ITnose

During the process of front-end development, I encountered a situation that required checking. For the convenience of user operation, the click event was placed on the DIV. (Knockout.js is used)

The code is roughly as follows:

<div id="one" data-biind="click:clickevent">    <input type="checkbox"><span>有事请勾我</span></div>

But there is a strange phenomenon when writing like this. When the mouse clicks on the div, everything is normal.

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

The checkbox is in an unchecked state, and the mouse directly clicks the checkbox to check. At this time, the following should be achieved: 1. Execute the clickevent event of the 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 tracking debugging result 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 execution is entered. After two or three steps, the checkbox is changed to Unselected state.

The reason has not yet been found. (The radiobox used in another place has a similar situation)

There is no other way but to work around it. By covering a layer of div on the checkbox, the div will be clicked when the mouse clicks. Instead of checkbox, change the checkbox status through clickevent (there is code to change the checkbox status in the clickevent event)

is implemented as follows:

<div id="one">    <div id="two" data-bind="click:clickevent"></div>    <div id="three">        <input type="checkbox"/> <span>有事请勾我</span>    </div></div>

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

The z-index attribute of the div on the upper layer is higher than that on the lower layer. div is large.

The ID attribute of the above DIV is just for illustration, and the class attribute is used in general programs.