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+xml技术实现分页浏览
Jul 27 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
浅谈vue的第一个commit分析
Jun 08 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
mysql 全文搜索 技巧
2007/04/27 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python解惑之True和False详解
2017/04/24 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
python sleep和wait对比总结
2021/02/03 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
数学专业推荐信范文
2013/11/21 职场文书
水果超市创业计划书
2014/01/27 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
司法助理专业自荐书
2014/06/13 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
丧事主持词
2015/07/02 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
Python基础之进程详解
2021/05/21 Python