默认情况下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. Github 初识(上传、下载)

    Git - 版本控制工具Github - 一个网站,提供给用户空间创建git仓储,保存用户的一些数据文档或者代码等GitLab - 基于Git的项目管理软件   上传 1 首先在Github 上注册一 ...

  2. Android UI 之一步步教你自定义控件(自定义属性、合理设计onMeasure、合理设计onDraw等)

        Android开发做到了一定程度,多少都会用到自定义控件,一方面是更加灵活,另一方面在大数据量的情况下自定义控件的效率比写布局文件更高.     一个相对完善的自定义控件在布局文件中和java ...

  3. Ext JS学习第五天 Ext_window组件（二）

    此文用来记录学习笔记 •上一讲我们已经学过了window的使用,那么在这将中,我们将结合然后把Ext中需要注意的地方,以及组建的使用给予介绍.indow做几个Web开发的经典示例. •ExtWeb实战 ...

  4. 高性能网站优化-创建快速响应的Web

    <高性能网站建设进阶指南> 优化原则 优化的目的是希望降低程序的整体开销. 减少开销 通常认为开销就是程序的执行时间.而在进行优化工作时,应该把重点放在对程序开销影响最大的那部分. 假设我 ...

  5. 简单JSONP跨域请求

    JSONP原理:利用<script>标签的src属性实现跨域的请求.可在URL中提供回调函数的名字.后台进过处理后将数据以回调函数参数的形式返回. demo:JSONP请求不同端口的数据 ...

  6. sql 和 nosql 说明

    在传统的数据库中, 数据库的格式是由表(table).行(row).字段(field)组成的.表有固定的结构,规定了每行有哪些字段,在创建时被定义,之后修改很困难.行的格式是相同的,由若干个固定的字段 ...

  7. linux账户管理(centos)

    1./etc/passwd 非常详细的/etc/passwd解释 http://luzl.iteye.com/blog/564404 vi /etc/passwd,可以看到如下信息,在最后一行可以看到 ...

  8. nginx根据条件跳转+跳转规则

    好的参考博文: nginx rewrite规则 自己写的时候参考这两个 Nginx 伪静态Rewrite,重定向Location配置总结(转) nginx rewrite规则语法 一.输入子目录跳转 ...

  9. shell学习之变量、判断、重复动作

    1.1 环境以及变量的定义.赋值.展开.删除 export:将一个变量导入到环境中:export PATH=$PATH:/home. readonly 讲一个变量设置为只读模式,在shell脚本中定义 ...

  10. Qt技巧：Win7下打包发布Qt程序（解释的比较清楚，把exe和dll伪装合并成一个文件）

    转自:http://www.stardrad.com/blog/qt-5%E7%A8%8B%E5%BA%8F%E5%9C%A8windows%E4%B8%8A%E7%9A%84%E5%8F%91%E5 ...