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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
javascript常见操作汇总
2014/09/03 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
详解vue.js之props传递参数
2017/12/12 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
使用python Django做网页
2013/11/04 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Python itertools.product方法代码实例
2020/03/27 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
会计毕业自我鉴定
2014/02/05 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
超市店庆活动方案
2014/08/31 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
vue实现简易音乐播放器
2022/08/14 Vue.js