默认情况下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. zookeeper集群搭建设置

    zookeeper 官网:http://zookeeper.apache.org/ 现在最新版本是 3.4.6 ,但是这个版本我没有运行起来,可能是那配置出现问题了,现在我用的是3.4.5 http: ...

  2. java 值传递和引用传递。

    java中 基本类型的参数传递是值传递,即前后两个方法的变量不相干,被调方法参数值改变不影响调用方法的传参数值. 引用数据类型的参数传递是 传递的是参数的地址.即被调方法修改参数值会,调用方法里会跟着 ...

  3. POJ 2762 Going from u to v or from v to u? （Tarjan） - from lanshui_Yang

    Description In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has ...

  4. Node.Buffer

    介绍 Buffer是一个典型的javascript与c++结合的模块,它将性能相关的部分用c++实现,将非性能相关的部分用javascript实现. 纯 JavaScript 对 Unicode 友好 ...

  5. IIS 7关闭应用程序池自动回收设置

    在web应用程序中经常有一些任务就需要在Global文件启用一个线程来实现, 那假设我们在自己的ASP.NET应用程序中加入了Quartz.NET框架,并且配置等等都OK了. 这个站点访问量很少,现在 ...

  6. Maven导入时，Cannot change version of project facet Dynamic Web Module to 3.0.

    今天手贱,在eclipse里面把项目删掉了,重新maven导入时,报出Cannot change version of project facet Dynamic Web Module to 3.0. ...

  7. C# 日期格式转换 string类型 20150329 转换为 2015/03/29

    DateTime.ParseExact("20150329", "yyyyMMdd", System.Globalization.CultureInfo.Cur ...

  8. YIi配置debug工具、yii配置gii工具

    $config['bootstrap'][] = 'debug';$config['modules']['debug'] = [ 'class'=>'yii\debug\Module', 'al ...

  9. subplot的几个详细说明

    http://blog.sciencenet.cn/blog-251664-800766.html

  10. 我的Python成长之路---第七天---Python基础（21）---2016年2月27日（晴）

    四.面向对象进阶 1.类方法 普通的方法通过对象调用,至少有一个self参数(调用的时候系统自动传递,不需要手工传递),而类方法由类直接调用,至少有一个cls参数,执行时,自动将调用该方法的类赋值个c ...