div失去焦点事件实现思路


Posted in Javascript onApril 22, 2014

看本文得先了解以下几个事件(摘自w3c)。

blur事件: 当元素失去焦点时发生 blur 事件。

focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件)。

tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序。

我们都知道blur只是针对form表单控件的,而对于 span , div , li 之类的,则没办法触发它们的动作,现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了。

真实项目代码:

Esc.PopupMenu.prototype._createPopup=function(){ 
var popupDiv = $('<div tabindex=1></div>'); //创建div 
popupDiv.appendTo(this._owner.element); //将div加span 
var _popup=popupDiv[0]; 
_popup.hide=function(){ 
popupDiv.hide(); 
}, 
_popup.show=function(){ 
popupDiv.show(); 
popupDiv.focus();<span style="white-space:pre"> </span>//让div得到焦点 
}; 
popupDiv.blur(function(){ 
popupDiv.hide(); 
}); 
return _popup; 
}

这段代码的意思是我用div模拟一个createPopup(IE可以直接生成),生成的时候给它一个tabindex属性,然后加入span,然后让它支持显示隐藏。特别值得注意的是popupDiv,focus(),必须要给div一个焦点,否则它没有焦点如何失去焦点。
Javascript 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
vue项目中使用Svg的方法
Oct 24 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 #Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 #Javascript
JavaScript闭包实例讲解
Apr 22 #Javascript
JavaScript函数的4种调用方法详解
Apr 22 #Javascript
JavaScript实现存储HTML字符串示例
Apr 21 #Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 #Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 #Javascript
You might like
使用php4加速网络传输
2006/10/09 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
php中动态变量用法实例
2015/06/10 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
如何编写python的daemon程序
2021/01/07 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
为数据库创建索引都需要注意些什么
2012/07/17 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
小学新学期教师寄语
2014/01/18 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
集体生日活动方案
2014/08/18 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
Nginx的基本概念和原理
2022/03/21 Servers
MySQL插入数据与查询数据
2022/03/25 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android