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 相关文章推荐
JS字符串函数扩展代码
Sep 13 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
js html实现计算器功能
Nov 13 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
jquery学习总结(超级详细)
2014/09/04 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
前端微信支付js代码
2016/07/25 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python3进制之间的转换代码实例
2019/08/24 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Python实现随机爬山算法
2021/01/29 Python
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
专业销售业务员求职信
2013/11/18 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
内科护士节演讲稿
2014/09/11 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python