在前端開發(fā)的過程中，遇到一種情況，需要勾選，為了用戶的操作便捷就將click事件放到了DIV上。（其中使用了knockout.js）

代碼大概如下：

代碼如下:

<div id="one" data-biind="click:clickevent">

<input type="checkbox"><span>有事請勾我</span>

</div>

但是這樣寫出現(xiàn)了一個奇怪的現(xiàn)象，鼠標(biāo)點(diǎn)擊div一切正常。

但鼠標(biāo)直接勾選checkbox不正常：

checkbox處于未勾選狀態(tài)，鼠標(biāo)直接點(diǎn)擊checkbox勾選，此時應(yīng)該實現(xiàn)是：1、執(zhí)行div的clickevent事件；2、事件執(zhí)行完畢后，checkbox處于勾選狀態(tài)。

但最終的結(jié)果卻是，checkbox仍然處于未勾選狀態(tài)。

跟蹤調(diào)試結(jié)果是，在執(zhí)行完clickevent事件時，checkbox還是處于勾選狀態(tài)，但clickevent執(zhí)行完后，接著進(jìn)入jquery的代碼執(zhí)行，走了兩三步后，checkbox即被改成未選中狀態(tài)。

原因至今未查到。（另外一個地方使用的radiobox也有類似的情況）

沒辦法，只能變通一下，通過在checkbox上面覆蓋一層div，讓鼠標(biāo)點(diǎn)擊的時候點(diǎn)的是div而不是checkbox，通過clickevent改變checkbox狀態(tài)（clickevent事件中本來就有改變checkbox狀態(tài)的代碼）

實現(xiàn)如下：

代碼如下:

<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，設(shè)置時關(guān)鍵是需要設(shè)置兩個屬性：position:absolute; z-index:1;

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

以上DIV的ID屬性只是為了說明，一般程序中使用class屬性設(shè)置。

更多信息請查看IT技術(shù)專欄