div失去焦点事件实现思路
更新时间：2014年04月22日 15:50:11 作者：
blur只是针对form表单控件的，而对于 span , div , li 之类的，则没办法触发它们的动作，本文有个示例，看看是怎么实现的
看本文得先了解以下几个事件（摘自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一个焦点，否则它没有焦点如何失去焦点。
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一个焦点，否则它没有焦点如何失去焦点。
相关文章
众所周知,微信小程序制作成功后,是需要提交到微信公众平台去审核的,审核通过后,才可以发布上线的,上线了之后才可以进行运营的,下面这篇文章主要给大家介绍了关于微信小程序上线发布具体流程的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要给大家介绍了关于js前端面试之同步与异步问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
javascript css在IE和Firefox中区别分析
我们讨论的主题CSS网页布局，最令大家头疼的问题就是浏览器兼容性，虽然52CSS.com介绍过很多这方向的知识，但依然让很多开发人员晕头转向，今天的这篇文章，将列出css和javascript在IE和Firefox中二十三个不同点，希望对大家的学习有所帮助。2009-02-02
在ECSHOP的目录/JS/common.js中有一个openSpeDiv方法是实现ECSHOP的弹窗效果的。接下来通过本文给大家分享使用openSpeDiv方法实现Ecshop登录弹窗框效果，需要的朋友参考下2017-03-03
这篇文章主要介绍了JavaScript中的变量提升和函数提升，在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功能2022-07-07
这篇文章主要介绍了基于JavaScript实现回到页面顶部动画代码的相关资料,代码简单易用，非常实用，需要的朋友可以参考下2016-05-05
JS的IE和Firefox兼容性集锦...2006-12-12
这篇文章主要为大家详细介绍了小程序选项卡以及swiper套用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
js如何使用Pagination+PageHelper实现分页
本文主要介绍了js如何使用Pagination+PageHelper实现分页，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了基于JavaScript实现点击页面任何位置返回的实例代码,需要的朋友可以参考下2016-08-08
最新评论