默认情况下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. HDU 1157 Who's in the Middle

    #include <cstdio> #include <algorithm> using namespace std; int main() { int n; while(sc ...

  2. c++的正整数高精度加减乘除

    数值计算之高精度加减乘除 一．      高精度正整数的高精度计算 1.加法 2.减法 减法和加法的最大区别在于:减法是从高位开始相减,而加法是从低位开始相加 3.乘法:用高精度加法实现 l 乘法的主 ...

  3. IOS开发新手教程（一）-数据类型和运算符

    OC语法入门(一) 数据类型和运算符 1.1凝视 凝视和其它语言一样,同意单行 ,多行凝视,一份规范的代码里面须要有一些正式的凝视,例如以下凝视: /* 这是多行 凝视 */ //这是多行凝视 OC语 ...

  4. 初探swift语言的学习—Object-C与Swift混编

    swift 语言出来后,可能新的项目直接使用swift来开发,但可能在过程中会遇到一些情况,某些已用OC写好的类或封装好的模块,不想再在swift 中再写一次,哪就使用混编.这个在IOS8中是允许的. ...

  5. VS2008非托管C++调用wcf(WebService)服务

    在Visual Studio 2008以及以后版本中,微软停止了非托管C++的直接WebService引用.不过ATL Server代码已经托管到开源网站上,我们可以找到ATL Server的源代码, ...

  6. python笔记之列表与元组函数和方法使用举例

    在学习列表之前先了解了raw_input和input的区别:(仅适用于版本2,版本3中raw_input和input合并,没有raw_input) input的语法为:input("str& ...

  7. geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式

    一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API ...

  8. 报错：loaded the "" nib but didn't get a UITableView

    在加载OpenPosition界面的时候报错:loaded the "" nib but didn't get a UITableView 原因: If you have a NI ...

  9. mac下 配置 Apache Php Mysql

    参考 http://www.guomii.com/posts/30136 参考 http://forums.mysql.com/read.php?11,600754,600754 MacOS 10.8 ...

  10. jQuery 动态元素添加

    有这么一道题 <!DOCTYPE html> <head> <title>前端工程师面试题</title> <meta http-equiv=&q ...