<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>A colourful bubble? &#187; IE</title>
	<atom:link href="http://www.paopao.name/tag/ie/feed" rel="self" type="application/rss+xml" />
	<link>http://www.paopao.name</link>
	<description>生活 读书 新知</description>
	<lastBuildDate>Wed, 20 May 2009 02:22:11 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Opera浏览器处理disabled属性的bug</title>
		<link>http://www.paopao.name/programme/webdevelop/opera-browser-to-deal-with-the-disabled-attribute-bug.html</link>
		<comments>http://www.paopao.name/programme/webdevelop/opera-browser-to-deal-with-the-disabled-attribute-bug.html#comments</comments>
		<pubDate>Wed, 26 Nov 2008 13:00:23 +0000</pubDate>
		<dc:creator>paopao</dc:creator>
				<category><![CDATA[WebDevelop]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[button]]></category>
		<category><![CDATA[disabled]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[opera]]></category>

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