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完成节点的增删改复制等的操作
Jan 02 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
javascript实现点击产生随机图形
Jan 25 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
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
javascript event 事件解析
2011/01/31 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python list与NumPy array 区分详解
2019/11/06 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
PHP经典面试题
2016/09/03 面试题
文员自我评价怎么写
2013/09/19 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
自荐信大全
2019/03/21 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
Golang map映射的用法
2022/04/22 Golang
python中的random模块和相关函数详解
2022/04/22 Python