DIV焦点事详解.docVIP

DIV焦点事件详解 --【focus和tabIndex】 发表于4个月前(2013-05-19 14:57) , 已有319次阅读 ，共 HYPERLINK /jgy/blog/131970 \l comments 1个评论 添加 tabindex=-1 属性； 默认：获取不到焦点事件（blur） div class=wl-product id=wl-product/div 可以获取焦点事件（blur） div class=wl-product id=wl-product tabindex=-1/div 具体详解： 先看：W3C关于onfocus的部分 The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 再看：Tabbing navigation的部分 Those elements that do not support the tabindex attribute or support it and assign it a value of 0 are navigated next. These elements are navigated in the order they appear in the character stream. 以下来自互联网： 【focus和tabIndex】 在KeyBind程序中，除了绑定对象的keydown事件，还不够的，可以在ff测试下面的代码： div style =width:100px; height:100px; background-color:#CCC; onkeydown =alert(1) / div 无论怎样都触发不了onkeydown事件（ie可以触发），那就奇怪了，按照一般的思路应该是可以的啊。 这个可以从w3c关于KeyboardEvent的部分中找到原因： Keyboard events are commonly directed at the element that has the focus. 大概就是说键盘按键事件一般指向能获取焦点的元素，就是不能获取焦点的元素就不能触发键盘按键事件了。 难道div就不能获取焦点？用下面的代码测试(ff)： div id =test style =width:100px; height:100px; background-color:#CCC; onfocus =alert(1) / div script document.getElementById( test ).focus(); / script 还真的不行，那问题就在于怎么使div能获取焦点了（当然这个是转了不少弯才想出来的）。 最后发现给元素设置tabIndex就能让元素能获取焦点了，如果不需要详细了解的话下面可以略过。 首先看看w3c关于onfocus的部分： The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 当元素通过指定（点击）或tab导航（Tabbing navigation）获得焦点，onfocus事件就会触发。 该属性会使用在以下元素（就是说默认可以获取焦点的元素）：A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 测试下面的代码： a href = # onfocus = alert(1) onkeydown = alert(2) focus / a 果然两个事件都可以执行。 接着看Tabbing navigation的部分： Those elements that do not support the tabindex attribute or support it and assign it a value of 0