tab 滚屏的浏览器差异

 按键 tab 在 可访问性 中具有重要作用，会使得下一个可聚焦元素 获得焦点，若将要获得焦点的元素在当前屏幕之外，还会引起浏览器滚屏（即触发 scroll 事件），但是对于是先触发将要获得焦点元素的 focus 事件，还是先触发 scroll ，ie 与 标准浏览器有分歧：

 

场景：

 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a id='after' href='#'>after</a>

 

打开该页面，点击空白区域后，按下 tab 键，则会使得 after 获得焦点并滚屏。

 

demo

 

差异：

 

ie 6,7,8

 

触发顺序为：

 

tab - >  scroll -> focus

 

先滚屏再使元素获得焦点

 

 

ie9,firefox,chrome

 

触发顺序为

 

tab -> focus -> scroll

 

标准：

 

既然 ie9 都和 ie6,7,8 不一样，那么标准应该是

 

tab -> focus -> scroll

 

先获得焦点再滚屏，不过具体规范出处未知。

 

ps:

 

如果设置 tabIndex 为 -1，根据规范该元素一定能获得焦点，并且不能被 tab 顺序聚焦机制选中。

但是在 ie6 中，该元素仍然是能被 tab 选到。

 

如果设置 tabIndex 为 0，该元素一定能获得焦点，焦点顺序和该元素在dom节点中的顺序对应（不完全相同）。

 

ps2 : 使用 javascript 操作 tabIndex

 

判断是否设置 tabindex :

 

var attr = elem.getAttributeNode("tabindex");
return attr ? attr.specified : false;

 

读取 elem 设置的 tabindex :

 

return elem.tabIndex;

 

设置 tabindex :

 

elem.tabIndex=1;

 

由于 tabindex 属于 html 属性，则最终生成 html ：

 

<x tabindex='1' ></x>

 

和设置 setAttribute 一样效果，不过直接用 setAttribute 的话会有很多麻烦 。

 

清除 tabindex 属性 ：

 

element.removeAttribute("tabindex");
element.removeAttribute("tabIndex");

 

两个都要写，后一个主要为了 ie6,7 ，ie6,7不能区分 content value 与 dom value .