[转]jquery div得到焦点时触发的动作设置tabindex属性可触发焦点事件 _Web前端

[转]jquery div失去焦点时触发的动作设置tabindex属性可触发焦点事件

在做菜单时会遇到这样的问题，就是当div失去焦点时，将这个菜单隐藏, 可能你会说用 blur 但如果你真正做过测试的话，就知道，blur 只是真对 form 表单控件的，而对于 span , div , li 之类的，则没办法触发这们的动作, 在网上找了好久，发现只要对你要触发的div 设置tabindex属性可触发焦点事件了，开心吧。

不论是在用jquery 的

$('#id').live('blur',function(){
$('#id).hide();
});

还是用普通JS 的 onblur 都可以实现这个功能了 !

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>div 触发失去焦点事件</title>
</head>
<body>
<h1>设置tabindex属性可触发焦点事件</h1>
<div style="float:left;">

<div id="birthday__jQSelect0" class="dropdown" tabindex="0">
<li>测试一下 </li><li>测试一下 </li><li>测试一下 </li>
</div>

<script type="text/javascript">
document.getElementById('birthday__jQSelect0').onblur = function(){
alert('div blur');
return false;
}
</script>
</body>
</html>
-----------------------------------------

附注W3C 对 tabIndex 的说明:

定义和用法
tabIndex 属性可设置或返回单选按钮的 tab 键控制次序。

语法
radioObject.tabIndex=number实例
下面的例子可显示出单选按钮的 tab index：

<html>
<head>
<script type="text/javascript">
function showTabIndex()
{
var r1=document.getElementById('radio1').tabIndex;
var r2=document.getElementById('radio2').tabIndex;
var r3=document.getElementById('radio3').tabIndex;
document.write("Tab index of radio button 1: " + r1);
document.write("<br />");
document.write("Tab index of radio button 2: " + r2);
document.write("<br />");
document.write("Tab index of radio button 3: " + r3);
}
</script>
</head>
<body>

</body>

[转]jquery div得到焦点时触发的动作 设置tabindex属性可触发焦点事件

[转]jquery div得到焦点时触发的动作设置tabindex属性可触发焦点事件