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和css(外部文件)
Apr 17 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
DOM 高级编程
May 06 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
详谈js模块化规范
2017/07/07 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
浅谈python标准库--functools.partial
2019/03/13 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Python读写压缩文件的方法
2020/07/30 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
个人思想政治总结
2015/03/05 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
同事打架检讨书
2015/05/06 职场文书
三八节活动主持词
2015/07/04 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers