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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
javascript去除空格方法小结
May 21 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
AngularJS的ng-click传参的方法
2017/06/19 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python中的随机函数小结
2018/01/27 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
小学毕业感言300字
2014/02/19 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
个人综合鉴定材料
2014/05/23 职场文书
基层党员公开承诺书
2014/05/29 职场文书
环境保护标语
2014/06/20 职场文书
模范班主任事迹材料
2014/12/17 职场文书
协议书范文
2015/01/27 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
《青山不老》教学反思
2016/02/22 职场文书