用DIV遮罩解决checkbox勾选无效的问题
2014-08-14 15:51
357 查看
在前端开发的过程中,遇到一种情况,需要勾选,为了用户的操作便捷就将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改变checkbox状态(clickevent事件中本来就有改变checkbox状态的代码)
实现如下:
ID为two和three的两个div,设置时关键是需要设置两个属性:position:absolute; z-index:1;
其中上面那层的div的z-index属性要比在下面那层的div大。
以上DIV的ID属性只是为了说明,一般程序中使用class属性设置。
代码大概如下:
<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属性设置。
相关文章推荐
- 用DIV遮罩解决鼠标直接勾选checkbox无效的问题
- 用DIV遮罩解决checkbox勾选无效的问题
- 解决checkbox全选之后取消全选,再次全选无效问题
- Android ListView中嵌入Button/CheckBox后Item点击无效问题解决
- z-index解决弹出层遮罩层覆盖子div不能显示输出的问题
- IE6 DIV 被DropdownList(select)遮罩问题的解决
- IE下 checkbox、radio等标签的label中的img点击无效(点击不能选中)问题解决
- 解决firefox下div的background无效的问题
- div宽度设置无效问题解决
- ASP.net2.0中"名称以无效字符开头"问题解决?
- .NET中回发或回调参数无效问题的解决
- 解决div总是被select遮挡的问题
- PL/SQL提示无效的窗口句柄的问题解决方法
- .NET中回发或回调参数无效问题的解决
- 解决DIV+CSS在FireFox中的居中问题
- sql server数据库备份还原后,出现“对象名无效”问题解决办法。
- 解决项目中两个小问题: DIV 高度控制, javascript tooltips
- VS2005无法调试,绑定句柄无效问题的解决方法
- .NET中回发或回调参数无效问题的解决
- Asp.net解决无效的 CurrentPageIndex 值.它必须大于等于 0 且小于 PageCount!的问题方法