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

最新推荐文章于 2021-11-21 11:20:04 发布

阅读量502

点赞数 1

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/marco1983/article/details/84116990

版权

在做菜单时会遇到这样的问题，就是当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>

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[转]jquery div失去焦点时触发的动作设置tabindex属性可触发焦点事件

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

扫一扫