在前端開發的過程中，遇到一種情況，需要勾選，為了用戶的操作便捷就將click事件放到了DIV上。（其中使用了knockout.js）
代碼大概如下：
<div id="one" data-biind="click:clickevent">
<input type="checkbox"><span>有事請勾我</span>
</div>
但是這樣寫出現了一個奇怪的現象，鼠標點擊div一切正常。
但鼠標直接勾選checkbox不正常：
checkbox處於未勾選狀態，鼠標直接點擊checkbox勾選，此時應該實現是：1、執行div的clickevent事件；2、事件執行完畢后，checkbox處於勾選狀態。
但最終的結果卻是，checkbox仍然處於未勾選狀態。
跟蹤調試結果是，在執行完clickevent事件時，checkbox還是處於勾選狀態，但clickevent執行完后，接着進入jquery的代碼執行，走了兩三步后，checkbox即被改成未選中狀態。
原因至今未查到。（另外一個地方使用的radiobox也有類似的情況）
沒辦法，只能變通一下，通過在checkbox上面覆蓋一層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屬性只是為了說明，一般程序中使用class屬性設置。