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 仿关机效果的图片层
Dec 26 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP进程同步代码实例
2015/02/12 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
jQuery事件对象总结
2016/10/17 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
《风娃娃》教学反思
2014/04/19 职场文书
开场白怎么写
2015/06/01 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
git中cherry-pick命令的使用教程
2022/06/25 Servers