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 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
Javascript之datagrid查询详解
Sep 15 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方法调用模式与函数调用模式简例
2011/09/20 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
yii操作cookie实例简介
2014/07/09 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
python实现simhash算法实例
2014/04/25 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
flask中过滤器的使用详解
2018/08/01 Python
python读取xlsx的方法
2018/12/25 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python 中如何获取列表的索引
2019/07/02 Python
Python操作qml对象过程详解
2019/09/26 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
python全局变量引用与修改过程解析
2020/01/07 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
饭店工作计划书
2014/01/10 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
合伙经营协议书范本
2014/04/18 职场文书
大学生个人学习总结
2015/02/15 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers