[转]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>

<form>
<input type="radio" id="radio1" tabindex="1" /><br />
<input type="radio" id="radio2" tabindex="2" /><br />
<input type="radio" id="radio3" tabindex="3" /><br />
<input type="button" onclick="showTabIndex()" value="Show tabIndex" />
</form>

</body>

你可能感兴趣的:(jquery)