用DIV遮罩解決滑鼠直接勾選checkbox無效的問題_HTML/Xhtml_網頁製作

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

代碼大概如下：

複製代碼

代碼如下:

有事請勾我

但是這樣寫出現了一個奇怪的現象，滑鼠點擊div一切正常。

但滑鼠直接勾選checkbox不正常：

checkbox處於未勾選狀態，滑鼠直接點選checkbox勾選，此時應該實作是：1、執行div的clickevent事件；2 、事件執行完畢後，checkbox處於勾選狀態。

但最終的結果卻是，checkbox仍處於未勾選狀態。

追蹤調試結果是，在執行完clickevent事件時，checkbox還是處於勾選狀態，但clickevent執行完後，接著進入jquery的程式碼執行，走了兩三步後，checkbox即被改成未選取狀態。

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

沒辦法，只能變通一下，透過在checkbox上面覆蓋一層div，讓滑鼠點擊的時候點的是div而不是checkbox，透過clickevent檢查>
代碼如下:

有事請勾我

ID為two和three的兩個div，設定時關鍵是需要設定兩個屬性：position:absolute; z-index:1;

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

以上DIV的ID屬性只是為了說明，一般程式中使用class屬性設定。