默认情况下div无法获取焦点，无法触发focus与blur事件，推測span，a等标签也无法触发焦点事件(input:button。及button标签能够触发)

怎样使div触发blur事件：能够给div加上tabindex属性

在线演示：http://sandbox.runjs.cn/show/e0bvfcag

源代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.box{

			width: 200px;

			height: 200px;

			background-color: #3295F2;

		}

	</style>

  <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/jquery.js"></script>

</head>

<body>

	<input type="text" />

	<input type="button" value="測试" class="but"/>

	<button>kkk</button>

	<div class="box" tabindex="1"></div>

	<script>

		$('.box').focus(function(){

			alert('div focus');

		});

		$('.box').blur(function(){

			alert('div blur');

		});

		$('.but').focus(function(){

			alert('but');

		});

		$('.but').blur(function(){

			alert('but');

		});

		$('button').focus(function(){

			alert('but');

		});

		$('button').blur(function(){

			alert('but');

		});

	</script>

</body>

</html>

相关资料：http://www.w3school.com.cn/tags/att_standard_tabindex.asp

demo:  http://www.w3school.com.cn/tiy/t.asp?

f=html_standard_tabindex

div无法触发blur事件解决的方法的更多相关文章

  1. div无法触发blur事件解决办法

    默认情况下div无法获取焦点,无法触发focus与blur事件,猜测span,a等标签也无法触发焦点事件(input:button,及button标签可以触发) 如何使div触发blur事件:可以给d ...

  2. jquery 赋值时不触发change事件解决

    $("#optionsId").change(function(){ $("#selectOptionsText").val('测试'); }); $(&quo ...

  3. blur([[data],fn]) 当元素失去焦点时触发 blur 事件。

    blur([[data],fn]) 概述 当元素失去焦点时触发 blur 事件.大理石平台生产厂 这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为.可以通过返回false来防止触发 ...

  4. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  5. 吐血bug-- 多个input框接连blur事件导致alert接连弹出

    本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...

  6. jquery移除、绑定、触发元素事件

    unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind() ...

  7. uni-app中使用scroll-view滚到底部时多次触发scrolltolower事件

    一.前言.scroll-view基本属性: 前言: 前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几 ...

  8. input输入框change和blur事件区别

    blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外. 1.没有进行任何输入时,不会触发change 在这种情况下失焦后, ...

  9. [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序，转屏时，Ext.Viewport不能触发orientationchange事件的解决的方法

    Sencha touch 2.4.2 已经解决问题了. 比方你为Ext.Viewport的orientationchange事件加入了一个监听方法: Ext.Viewport.on('orientat ...

随机推荐

  1. 导出Ext.grid.Panel到excel

    1.客户端定义,基本的想法是form提交表格头定义,数据,以json方式传输 Ext.grid.Panel.addMembers({ exportExcel:function(options){ if ...

  2. 取代奶瓶Minidwep-gtk 破 WPA 全攻略

     目录 1. CDlinux 下使用 minidwepgtk 获取握手包并使用自带的字典破解 2. 自带的字典破解不出密码时使用 U 盘外挂字典继续暴力破解密码 3. 将握手包拷贝到 Windows ...

  3. 使用python网络库下载

    下载1000次网页资源 1,普通循环方式下载1000次,非常慢 #!/usr/bin/python # -*- coding: utf-8 -*- import sys import os impor ...

  4. STL algorithm算法mismatch(37)

    mismatch原型: std::mismatch equality (1) template <class InputIterator1, class InputIterator2> p ...

  5. malloc、calloc、realloc三者的差别

    1.malloc 作用:分配内存块 原型:void *malloc(size_t size);size表示要分配的字节数 返回值:返回一个指向所分配空间的void指针,假设没有足够的内存可用,则返回N ...

  6. GDB命令行最基本操作

    程序启动: A.冷启动 gdb program              e.g., gdb ./cs gdb –p pid                 e.g., gdb –p `pidof c ...

  7. Group By 多个分组集小结 --GROUPING SETS，GROUP BY CUBE，GROUP BY ROLLUP，GROUPING(),GROUPING_ID()

    T-SQL 多个分组集共有三种 GROUPING SETS, CUBE, 以及ROLLUP, 其中 CUBE和ROLLUP可以当做是GROUPING SETS的简写版 示例数据库下载: http:// ...

  8. ThinkPHP第九天(在Admin分组中配置__PUBLIC__，$POST异步传输，import使用方法，验证码点击刷新方法，Create方法作用)

    1.项目分组之后,后台模板的公用文件一般放置在Tpl/Admin/Public中,这样子在替换模板路径时候如果还用__PUBLIC__时为了不与前台冲突,应该在Admin/config.php中配置一 ...

  9. python成长之路16

    阅读(72) 一:jQuery是一个兼容多浏览器的javascript类库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发, ...

  10. html(第一天，div+css)

    一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 ...