1. 问题描述
下面代码会在浏览器中生成一个多选框,单击它选中打勾,再次单击取消打勾。
<input type="checkbox" />
尝试如下操作:快速两次单击(双击/比双击稍慢),存在浏览器兼容性问题。
假如此时 checkbox 为选中状态:
- Chrome/Firefox 浏览器下,第一次单击会使 checkbox 取消选中,在第二次单击之后,checkbox 会还原为已选中状态。
- IE 浏览器下(所有 IE 版本),第一次单击会使 checkbox 取消选中状态,第二次单击完之后,checkbox 并不会变为已选中状态,而是继续保持取消选中的状态。
总结:在 IE 下,双击 checkbox 会变成与之前相反的状态;在非 IE 下,双击 checkbox 会变成与之前相同的状态。
2. 解决方案
对于想在 IE 下实现非 IE 下的效果,则需将该 checkbox 元素的双击事件指定为单击事件。