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中的location用法简单介绍
Mar 07 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
js如何验证密码强度
Mar 18 Javascript
js+canvas实现画板功能
Sep 13 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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中使用XML
2006/10/09 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP 验证码的实现代码
2011/07/17 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
初识PHP中的Swoole
2016/04/05 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python 忽略文件名编码的方法
2020/08/01 Python
python time()的实例用法
2020/11/03 Python
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
跟单文员的岗位职责
2013/11/14 职场文书
校庆筹备方案
2014/03/30 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL