用DIV遮罩处理电脑鼠标立即勾选checkbox失效的难题

在前端开发开发设计的全过程中,遇到1种状况,必须勾选,以便客户的实际操作方便快捷就将click恶性事件放到了DIV上。(在其中应用了knockout.js)

编码大约以下:

拷贝编码
编码以下:

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

可是这样写出現了1个怪异的状况,电脑鼠标点一下div1切一切正常。

但电脑鼠标立即勾选checkbox不一切正常:

checkbox处在未勾选情况,电脑鼠标立即点一下checkbox勾选,此时应当完成是:1、实行div的clickevent恶性事件;2、恶性事件实行结束后,checkbox处在勾选情况。

但最后的結果确是,checkbox依然处在未勾选情况。

追踪调节結果是,在实行完clickevent恶性事件时,checkbox還是处在勾选情况,但clickevent实行完后,接着进到jquery的编码实行,走了两3步后,checkbox即被改为未选定情况。

缘故至今未查到。(此外1个地区应用的radiobox也是有相近的状况)

没法,只能变通1下,根据在checkbox上面遮盖1层div,让电脑鼠标点一下的情况下点的是div而并不是checkbox,根据clickevent更改checkbox情况(clickevent恶性事件中原本就有更改checkbox情况的编码)

完成以下:

拷贝编码
编码以下:

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

ID为two和three的两个div,设定时重要是必须设定两个特性:position:absolute; z-index:1;

在其中上面那层的div的z-index特性要比在下面那层的div大。

以上DIV的ID特性只是以便表明,1般程序流程中应用class特性设定。