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获取农历日期具体实例
Nov 14 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
json数据处理及数据绑定
Jan 25 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
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使用COPY函数更新配置文件的方法
2015/06/18 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
简单谈谈json跨域
2016/03/13 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python微信公众号开发简单流程
2018/03/23 Python
Python错误处理操作示例
2018/07/18 Python
python实现图片批量压缩程序
2018/07/23 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
flask开启多线程的具体方法
2020/08/02 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
MySQL慢查询优化解决问题
2022/03/17 MySQL