div无法触发blur事件解决的方法
默认情况下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事件解决的方法的更多相关文章
- div无法触发blur事件解决办法
默认情况下div无法获取焦点,无法触发focus与blur事件,猜测span,a等标签也无法触发焦点事件(input:button,及button标签可以触发) 如何使div触发blur事件:可以给d ...
- jquery 赋值时不触发change事件解决
$("#optionsId").change(function(){ $("#selectOptionsText").val('测试'); }); $(&quo ...
- blur([[data],fn]) 当元素失去焦点时触发 blur 事件。
blur([[data],fn]) 概述 当元素失去焦点时触发 blur 事件.大理石平台生产厂 这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为.可以通过返回false来防止触发 ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- 吐血bug-- 多个input框接连blur事件导致alert接连弹出
本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...
- jquery移除、绑定、触发元素事件
unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind() ...
- uni-app中使用scroll-view滚到底部时多次触发scrolltolower事件
一.前言.scroll-view基本属性: 前言: 前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几 ...
- input输入框change和blur事件区别
blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外. 1.没有进行任何输入时,不会触发change 在这种情况下失焦后, ...
- [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序，转屏时，Ext.Viewport不能触发orientationchange事件的解决的方法
Sencha touch 2.4.2 已经解决问题了. 比方你为Ext.Viewport的orientationchange事件加入了一个监听方法: Ext.Viewport.on('orientat ...
随机推荐
- hdoj 1824 Let's go home(2-SAT)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1824 思路分析:该问题为2-SAT问题:需要注意逻辑推理的等价性: (1)题目第一个条件:每一个队或者 ...
- Objective-c中@interface、@implementation、@protocal
以下 void print(); }; class AC{ }; 这时候,AI和AC是独立存在,AC不会因为没有和AI建立关系而编译错误,将AC做以下修改后,AI才和AC建立了关系,AC必须实现AI中 ...
- asp.net生成RSS
经常看到博客.还有很多网站中有RSS订阅,今天就来玩玩asp.net生成RSS,在网上查找了相关资料 发现just soso,如下: aspx <?xml version="1.0&q ...
- 转载 js判断浏览器
$scope.identifyBrowser= function () { var userAgent = navigator.userAgent, rMsie = /(msie\s|trident. ...
- Android中图片处理相关问题
在Android的开发中,我们经常回去处理一些图片相关的问题,比如当加载图片到内存中产生的OOM(OutOfMemory)异常.图片加载到内存中占多大内存的问题.jpg png两种常见的图片的原理及区 ...
- Task线程 同时执行多个任务
Task taskTest = Task.Factory.StartNew(() => { Console.WriteLine("); },TaskCreationOptions.No ...
- BZOJ 3293 分金币
整体来说,这道题与之前做的1045题目完全一样,出了说法不一样外,思路及做法可以照搬,因此在这里便不再详解. 程序如下:(如有疑问请参看我的博客http://www.cnblogs.co ...
- CentOS搭建PHP服务器环境(LAMP)
安装httpd mysql mysql-server php: yum install -y httpd mysql mysql-server php php-devel 安装php的扩展 yum i ...
- [LeetCode]题解（python）：014-Longest Common Prefix
题目来源: https://leetcode.com/problems/longest-common-prefix/ 题意分析: 这道题目是要写一个函数,找出字符串组strs的最长公共前缀子字符串. ...
- A + B Problem II 大数加法
题目描述: Input The first line of the input contains an integer T(1<=T<=20) which means the number ...