Opera浏览器处理disabled属性的bug

星期三, 十一月 26th, 2008

最近在看John Resig的《精通JavaScript》,作为JQuery的作者之一,技术实力自然不在话下。不过如果仔细看某些源代码的话,还是有些小问题的,也许是作者比较粗心吧,这里是中文版的勘误页面,再版的时候估计会好很多。 趁着读书时的热情,做了一些小的demo来练习,在上一个demo中发现opera浏览器在处理xhtml标签的"disabled"属性时有一个bug。 事情是这样的,我在页面中有一个button元素,我希望它只能被点击一次,所以我在button的click事件中将它的"disabled"属性置为true。这样,点击一次之后,这个button就变成了灰色的不可用状态,我也确实无法再通过鼠标直接点击它了。事情到此都是没有问题的,接下来我希望能用键盘快捷键来控制这个button,于是我给它添加了"accesskey"属性,然后问题就来了,在我点击一次使得button变为不可用状态后,我还是可以通过accesskey来点击它。 我在其他的浏览器上进行了同样的实验,结果表明在我现有的浏览器 (FireFox3, IE8, Safari3/win, Chrome0.4) 上都没有这个bug,除了opera。我目前使用的是opera 9.61版,不过我估计opera以前的版本也存在同样的bug。 进一步实验后,发现opera不只是在处理"accesskey"的点击时有bug,而是在处理除了鼠标直接点击之外的所有其他方式时都存在这个bug。比如在另一个JavaScript脚本里调用这个已经被禁用的button的click函数,甚至通过tab获取button焦点之后连续点击回车,都可以绕过button的disabled属性而触发它的click事件。 我写了一个demo页面来演示这个bug:Button & accesskey 还有要注意的一点就是accesskey在不同的浏览器中的使用方法并不一样。Opera中是通过shift+esc调出accesskey菜单再按相应的accesskey,IE8、Safari3/win以及Chrome0.4则都是使用alt+accesskey。FireFox3中则默认是alt+shift+accesskey,这避免了与浏览器菜单快捷键的冲突,不过可以通过修改about:config的ui.key.contentAccess键值来更改,这个键值的具体含义如下: 1 = Shift 2 = Ctrl 3 = Shift + Ctrl 4 = Alt 5 = Shift + Alt 6 = Alt + Ctrl 7 = Ctrl + Shift + Alt 另外,在做这个demo的时候还发现了IE在处理button按钮时和其他浏览器的不同。在JavaScript脚本中通过element.value来获取button的value属性的值,在IE中得到的是button的innerHTML值,而在其他浏览器中得到的是正确的value属性的值。在网上搜了一下,这个问题有不少人问,解决办法也有不少,有的人建议改用input标签,不过我觉得不符合语义化的要求。还有通过Javascript和xml来解决的,感觉太麻烦了。最后我决定使用button的title属性来存储我需要的值,没办法,妥协一下吧。