focus是一个事件，前面加个on表示在这个事件发生的时候执行
等号后面的预警，而blur()是this的一个方法，this.blur()就是让这个对象失去焦点。
总之：作用就是在某对象获得焦点时使其失去焦点。这个语句仅仅是为了消除链接获取焦点（如tab键）后的虚线框
<body>
<a href="#" >第一个链接</a>
<a href="#" >第二个链接</a>
<a href="#" οnfοcus="this.blur();">第三个链接</a>
<a href="#" >第四个链接</a>
<a href="#" >第五个链接</a>
<a href="#" >第六个链接</a>
</body>按下Tab键，第一和第二个链接都可以正常获取焦点，继续Tab到第三个链接时，悲剧出现了：此时焦点会回到第一个链接，而无法Focus到第四个链接，原因是当Focus到第三个链接时，οnfοcus=”this.blur()” 事件处理强制触发了失焦，焦点重新回到文档的最开始。于是不停按Tab的结果就是焦点在前面三个链接轮流转，后面的内容通过Tab键无法访问[1]。
（图二）
那么，有更好的方式吗？从根源上看，加 οnfοcus= ” this.blur() ”是为了去除链接获取焦点后外围的虚线框（当然 chrome 、 safari 、 opera 下的 focus 效果各异，这里姑且就这么叫吧 ）。 W3C关于Outline的文章 里说明这个虚线框用来告诉用户当前页面获取焦点的元素。我觉得，虚线框的存在有它的合理性，但有时你也许无法回避某些”视觉洁癖”需求（如图二：虚线框使“商品”背景和下面的红色色块分隔开了），以下总结了去掉虚线框的几种常用方法：去除虚线框的方法 | 优劣 | 兼容性 | 是否中断tab |
<a href=”#” οnfοcus=”this.blur()”>this blur</a> | 链接聚焦触发时失去焦点，js和html耦合在一起 | 没有兼容性问题 | 是 |
a:focus {outline:none}或 a{outline:none} | outline由css2.1引入，去除虚线框视觉上的问题正是css的职责 | ie6/ie7不支持,ie8+/ff /safari/opera[2]支持 | 否 |
<a href=”#” hidefocus=”true” >hidefocus</a> | 该属性是ie的私有属性[3] | ie5+支持 | 否 |
a { noFocusLine: expression(this.onFocus = this.blur())} | 可批量处理，但expression的性能问题不能忽视 | expression ie6/7支持，ie8+、非ie不支持 | 是 |
综合以上，去除链接虚线框的推荐方法是：ie下用hidefocus属性，ff/chorme/opera/safari下用outline:none。即:
<a href="#" hidefocus="true" >链接</a>
a:focus {
outline:none;
}注释
[1]Safari默认情况下，按tab键是不会focus链接的，但会focus表单域，在偏好设置-高级勾选“按下tab以高亮显示网页上的每一项”可开启该功能。Opera比较特殊，它通过shift+上下左右方向键可以向上下左右focus页面焦点。
[2]在Opera下点击链接（focus和active状态）时都不会出现所谓的虚线框，所以 Opera下链接的虚线框问题可以不计。 Opera 通过shift+上下左右键产生的线框通过outline:none并不能去除，但是Opera支持outline这个属性。
[3]hidefocus属性是ie的私有属性，虽然hidefocus属性有true orfalse两个值，但测试结果是ie5-ie9不管其值为true or false, 只要添加hidefocus属性，该链接都会失去虚线框。
出处： http://www.jb51.net/web/35407.html
2427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
