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 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 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/01/24 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
npm的lock机制解析
2019/06/20 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
python try 异常处理(史上最全)
2019/03/07 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python缓存技术实现过程详解
2019/09/25 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python中添加模块导入路径的方法
2021/02/03 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
任课老师推荐信范文
2013/11/24 职场文书
社区护士演讲稿
2014/08/27 职场文书
销售顾问工作计划书
2014/09/15 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python