用DIV遮罩解决鼠标直接勾选checkbox无效的问题
网页制作 发布日期:2024/12/26 浏览次数:1
正在浏览:用DIV遮罩解决鼠标直接勾选checkbox无效的问题
在前端开发的过程中,遇到一种情况,需要勾选,为了用户的操作便捷就将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属性设置。
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。