首頁 >web前端 >html教學 >用DIV遮罩解決滑鼠直接勾選checkbox無效的問題_HTML/Xhtml_網頁製作

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原創
2016-05-16 16:37:041448瀏覽

在前端開發的過程中,遇到一種情況,需要勾選,為了用戶的操作便捷就將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屬性設定。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn