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 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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文件上传你必须知道的几点
2015/10/20 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python获取服务器响应cookie的实例
2018/12/28 Python
用Python配平化学方程式的方法
2019/07/20 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
python动态视频下载器的实现方法
2019/09/16 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
kfc实习自我鉴定
2013/12/14 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
老人节主持词
2015/07/04 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书