在做菜单时会遇到这样的问题，就是当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>
相关推荐
`blur`事件会在元素失去焦点时触发，而`focus`事件则在元素获得焦点时触发。在HTML的`form`元素中，如`input`、`textarea`等，这些事件是内建支持的。然而，对于非表单元素，如`div`、`span`或`li`，它们默认并不...
此外，为了让键盘操作更符合无障碍标准，可以考虑使用`tabindex`属性来设置选项卡标题的可聚焦性，并通过`focus`和`blur`事件来控制焦点的移动。 项目的实现可能包含以下主要步骤： 1. 初始化选项卡状态：设置默认...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"jquery_弹出模式框"这个主题主要关注jQuery中的弹出对话框功能，这是一种用于向用户展示...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"jquery提示框"是jQuery库中一个重要的功能，它用于向用户展示各种信息，如警告、确认消息...
在本案例中，jQuery将被用来监听鼠标悬停(hover)事件，触发选项卡内容的切换。 `hover`是一个jQuery的特殊事件，由两个基本事件组合而成：`mouseenter`和`mouseleave`。当鼠标指针进入元素时，`mouseenter`事件触发...
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div ...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果等任务。在本话题中，我们将探讨“JQUERY 遮罩层”的概念，这是一种创建弹出对话框或加载指示器的常用技术。遮罩层...
然后通过触发事件来打开对话框： ```javascript $("#openButton").click(function() { $("#dialog").dialog("open"); }); ``` 2. **Bootstrap Modal**：Bootstrap是另一个流行的前端框架，它也提供了弹出窗口组件...
然后，如果需要在某个事件后显示这个DIV，可以使用jQuery来操作。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画。例如，以下代码会在用户点击按钮时显示这个DIV： ```html 显示DIV $...
在网页设计中，"跳出div层对话框"通常是指在一个页面元素（如一个div）上创建可交互的弹出窗口，这种窗口常被用于显示警告、确认信息或提供额外的操作选项。这种效果可以通过多种技术实现，包括JavaScript、jQuery...
当用户触发某个事件（如点击按钮）时，jQuery会通过`.show()`或`.fadeIn()`等方法显示隐藏的HTML元素，这些元素在页面加载时已经存在但初始状态下是不可见的。同时，可以通过调整元素的`z-index`属性来确保弹出层...
当用户点击选项卡时，我们需要捕获这个事件并触发相应的动作。在jQuery中，可以使用`click`事件来实现： ```javascript $('.tabs li a').click(function(e) { e.preventDefault(); // 阻止默认链接行为 // 在这里...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> ...
同时，为了实现模态效果，我们需要设置一个透明的遮罩层覆盖整个页面，当弹出层出现时，使用`.fadeIn()`和`.fadeOut()`进行平滑过渡。 例如，创建一个简单的弹出层可以这样做： ```html 打开弹出层 <div id="popup...
在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了JavaScript编程，使得开发者能够更加高效地处理DOM操作、事件处理、动画效果以及Ajax交互。本压缩包"jQuery点击弹出下拉复选框代码.zip"提供的是...
在前端开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作。本项目"jQuery选项卡自定义切换方式代码"显然关注的是利用jQuery实现一个交互式的选项卡组件。这个组件通常用于展示...
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本主题将深入探讨如何使用jQuery来创建一个按钮点击后弹出提示框的功能。 首先，我们需要理解jQuery的...
8. **可访问性**：考虑到无障碍性（ Accessibility），确保键盘用户也能方便地切换Tab，可以使用`tabindex`属性和`keydown`事件。 压缩包内的“使用须知.txt”文件很可能会提供关于如何解压和运行代码的详细说明，...
这些事件包括`tabSelect`（选项卡切换时触发）和`beforeTabSelect`（切换前触发）。例如，监听`tabSelect`事件： ```javascript $('.tab-select').on('tabSelect', function(event, tabIndex) { console.log('当前...
var confirmBox = '<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">'+ '...确认框内容... '</div>'; $('body').append...