登录  /  注册
首页 > web前端 > js教程 > 正文
div失去焦点事件实现思路_javascript技巧
php中文网
发布： 2016-05-16 16:51:37
原创
1525人浏览过
看本文得先了解以下几个事件（摘自w3c）。

blur事件: 当元素失去焦点时发生 blur 事件。

focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件)。

tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序。

我们都知道blur只是针对form表单控件的，而对于 span , div , li 之类的，则没办法触发它们的动作，现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了。

真实项目代码:
复制代码 代码如下:

Esc.PopupMenu.prototype._createPopup=function(){
var popupDiv = $('
'); //创建div
popupDiv.appendTo(this._owner.element); //将div加span
var _popup=popupDiv[0];
_popup.hide=function(){
popupDiv.hide();
},
_popup.show=function(){
popupDiv.show();
popupDiv.focus(); //让div得到焦点
};
popupDiv.blur(function(){
popupDiv.hide();
});
return _popup;
}

这段代码的意思是我用div模拟一个createPopup(IE可以直接生成)，生成的时候给它一个tabindex属性，然后加入span，然后让它支持显示隐藏。特别值得注意的是popupDiv,focus（），必须要给div一个焦点，否则它没有焦点如何失去焦点。
相关标签：
失去焦点 事件
来源：php中文网
上一篇：IE6已终止操作问题的2种情况及解决_javascript技巧 下一篇：js隐式全局变量造成的bug示例代码_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在SQL中比较与去年同期的行的日期。 我有一个数据库，包含订单日期、产品代码和客户，就像这个例子一样： 索引 代码 客户 订单日期 1 CCCC 2018-01-01 2 ...
P粉821231319来自于2023-08-02 22:49:52
0 1 231
复制:如何添加页边距，以李项 我有一个订购的列表，我设置了一个可以创建失败空间的样式。我对边缘的理解是在外部空间减少的情况下进行的。我尝试将边缘设置为：0以固定网络。
P粉037215587来自于2023-08-02 22:33:27
0 1 153
自定义Angular Material UI CSS样式 我想用粘贴在下面的垫子网格瓷砖和已布线的瓷砖作为普通垫子网格瓷砖的内容。问题是，当我使用垫子网格瓷砖时，中心显示的潜在设计，以及注意到底部的方式。从行顺序中禁用后，所有
P粉696146205来自于2023-08-02 21:58:40
0 1 154
当切换属性使用时，我能保持CSS过渡吗? 我有一个div从左到右移动。为了使它始终在屏幕上，并且在窗口调整大小时永远不会对齐，我根据屏幕的哪一侧最接近来切换左和右的使用。
P粉465675962来自于2023-08-02 21:13:37
0 1 150
使用.modules时不应用样式的问题。在Next.js中 我开始下一个.js13app，Ihaveamain.modules.scssfile.heading｛font-size:4rem；color:#000；｝.ddark.headi...
P粉504080992来自于2023-08-02 20:50:39
0 2 182
故障排除：错误111 - 无法连接到MySQL服务器 我在Linux主机上安装了MySQL服务器，IP地址为192.168.1.100，但是当我尝试连接到这个IP时，总是出现错误(111)。但是使用localhost和127.0.0....
P粉236743689来自于2023-08-02 20:16:12
0 2 253
为什么悬停（hover）不起作用，样式不显示？ 为什么悬停（hover）不起作用，样式不显示？
P粉842215006来自于2023-08-02 20:04:07
0 1 170
Yellow-svg-path动画 .arrow{宽度:45 px;高度:25 px; clip-path:多边形(0%,20%,60%,20%,60%,0%,100%,50%,60%,100%,60%,80%,0%...
P粉021708275来自于2023-08-02 19:05:54
0 1 268
可以用这种方式定制HTML细节标记的样式吗? 这是什么样子的ToaChieve，>可变长度标题：AsenteWorthExtThat Mayor可能不会包装DependengPontheWidthoftHeContain...
P粉300541798来自于2023-08-02 18:34:52
0 1 261
在Tailwind CSS中，如何将第二个flex项目环绕在第一个项目周围的指南 我有一个包含两个flex项目的flex容器。第一个flex项目应该确定容器的宽度，而第二个flex项目应该环绕在其周围。我正在使用Tailwind CSS进行样式设置，但是我无法获...
P粉156983446来自于2023-08-02 18:31:22
0 1 162
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 立即咨询

  • 微信沟通

  • QQ群

  • 优惠券

  • 返回顶部