默认情况下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. JAVA GUI学习 - JDialog模式、非模式窗口组件学习

    /** * JDilog学习笔记 * @author Wfei * */ public class JDialogKnow extends JFrame { JDialog jDialog; JBut ...

  2. Java-多线程的实现与启动

    class mythread extends Thread  //多线程的启动 {  private String name;  public mythread(String name)  {   t ...

  3. NeHe OpenGL lession 4

    // lession4.c #include <OpenGL/OpenGL.h> #include <GLUT/GLUT.h> #include <stdio.h> ...

  4. 100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全

    Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 浏览器 同样开启开发者模式后,进行联机调试.功能彪悍. 最近在做一个页面时,发现在 iPad 的 ...

  5. android api 中文 （75）—— AdapterView.OnItemClickListener

    前言 本章内容是android.widget.AdapterView.OnItemClickListener,版本为Android 2.3 r1,翻译来自"麦子",欢迎大家与他交流 ...

  6. 使用LiveWriter发布Orchard博客

    我们可以Windows Live Writer来发布Orchard博客 在Dashboard–> Modules菜单找到 Remote Blog Publishing 模块.点击 Enable ...

  7. c#程序添加其他网站的webservice引用。

    前言: 有A网站,B网站两个网站独立运行.某一天,需要两个网站进行合作来完成一件事,比如用A网站接收一些数据进行处理,存入中转数据库,B网站定时去取数据进入自己的系统进行处理. 可能我们会先想到在B网 ...

  8. BZOJ 1202: [HNOI2005]狡猾的商人( 差分约束 )

    好像很多人用并查集写的... 前缀和, 则 sumt - sums-1 = v, 拆成2条 : sumt ≤ sums-1 + v, sums-1 ≤ sumt - v 就是一个差分约束, 建图跑SP ...

  9. BZOJ 1863: [Zjoi2006]trouble 皇帝的烦恼( 二分答案 )

    二分答案..然后从头到尾推一下, 看最后一个能不能取0个和第一个人相同的勋章 ------------------------------------------------------------- ...

  10. 我的Python成长之路---第八天---Python基础（24）---2016年3月5日（晴）

    多线程编程 什么是多线程,线程是操作系统能够进行运算调度的最小单位.他包含在进程之中,是进程中的实际运作单位.线程是进程中一个单顺序的空值六,一个进程可以并发多个线程,每个线程可以并行处理不同的任务. ...