在做弹出层时需要对div获取失去焦点

focus blur只是针对form表单控件的，而对于 span , div , li 之类的，则没办法触发它们的动作
几个事件（摘自w3c）。

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

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

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

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

tabIndex值是正数的对象根据递增的值顺序和代码中的位置顺序来被选择
tabIndex值是0的对象根据在代码中的位置顺序被选择
tabIndex值是负数的对象会被忽略

div块级元素获取焦点的更多相关文章

  1. span(行级元素)在不定高的div(块级元素)中垂直居中的方法

    设置父级元素: align-items: center; display: flex;

  2. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  3. HTML基础 块级元素和内联元素

    大多数 HTML 元素被定义为块级元素或内联元素. 块级元素包括:body  from  select  textarea  h1-h6 html table  button  hr  p  ol   ...

  4. 块级元素及内联元素对margin、padding的态度

    1.块级元素 margin:跟标准一样,设置该块级元素边框与同级兄弟元素或者父元素的距离,俗称外边距. padding:先延伸边框(也就是优先改变元素尺寸而不动元素中内容的位置),当边框碰到父元素的边 ...

  5. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  6. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

  7. html5 区块与内联div 与span html块级元素

    HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...

  8. css总结17:HTML块级元素&行内元素之分: <div> 和<span>

    1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...

  9. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

随机推荐

  1. kvm : Permission denied

    创建虚拟机类型为:“virt type :kvm” 时,会报如下错误: Could not access KVM kernel module: Permission denied failed to ...

  2. openstack 动态加载usb,需要修改kvm虚拟机的xml文件

    一.利用libvirt命令动态挂载 在利用KVM的虚拟桌面应用中,有时候需要在虚拟桌面起来后还能够动态的挂载或卸载数据盘,以达到类似热插盘U盘或移动硬盘的效果,当然管理上需要做处理.如果纯粹中技术上来 ...

  3. 搭建MongoDB分片集群

    在部门服务器搭建MongoDB分片集群,记录整个操作过程,朋友们也可以参考. 计划如下: 用5台机器搭建,IP分别为:192.168.58.5.192.168.58.6.192.168.58.8.19 ...

  4. HTML5 Canvas 绘制库存变化折线 增加超储告罄线

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  5. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何动态显示当前运行行

    在F11运行状态下,点击Online-Display Flow Control然后可以看到绿色的行就是当前正在运行行     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http:// ...

  6. Django——如何在Django模板中注入全局变量？——part2

    模版中的变量由context中的值来替换,如果在多个页面模版中含有相同的变量,比如:每个页面都需要{{user}},笨办法就是在每个页面的请求视图中都把user放到context中.   from d ...

  7. Spring搭配Ehcache实例解析

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50538085 本文出自[我是干勾鱼的博客] 1 Ehcache简单介绍 EhCa ...

  8. cocos2d-x 3.1.1 学习笔记［11］ http请求 ＋ json解析

    //http须要引入的头文件和命名空间 #include <network/HttpClient.h> using namespace network; //json须要引入的头文件 #i ...

  9. 【C++基础 03】do...while(0)妙用

    我的主题是,有时候知道一些细节会让你写出更好的代码. ============================================ 之前学coocs2d-x的时候,发现有非常多do...w ...

  10. [linux]w命令和uptime命令查看系统负载

    在Linux系统中查询系统CPU和内存的负载(使用率)时,我们通常习惯于使用top.atop或者ps,这篇文章将要给大家介绍如何使用w命令和uptime命令来查看系统的负载情况,对于uptime命令, ...