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

时间: 2024-10-09 22:58:57

div无法触发blur事件解决的方法的相关文章

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="UT

2014年5月27日中国大陆封锁Google事件解决的方法

2014年5月27日中国大陆封锁Google事件指自2014年5月27日后,Google公司的各项服务遭到疑似来自防火长城的恶意干扰,导致中国大陆地区的用户无法正常使用其服务的事件.自当天起,来自中国大陆的用户发现Google旗下的各个分站以及Google的其它服务(Google Play.Gmail.Google Docs等)均无法正常訪问与使用,甚至无法登陆Google账户.谷歌中国旗下的谷歌地图.谷歌翻译依然能够使用,但部分地区仍有连接被重置.连接超时等情况 最新谷歌镜像git网址:htt

在UIWebView中加载的HTML所触发的事件通过OC方法响应

前段时间在做项目时,在UIWebView加载的Html中点击了一个区域需弹出拍照界面,可是根据业务的不同情况,区域的位置是不同的.我考虑了多种方案,最后还是觉得这个通过“桥梁”用OC方法来处理对应节点的触发事件更为直接和方便. 工具类:WebViewJavascriptBridge  顾名思义,此类就像OC与JS的桥梁,可以使JS的事件与OC的方法相关联. WebViewJavascriptBridge包含一个类实例方法,入参是委托对象. 有一个委托方法,此方法是用来接受到html点击事件返回的

等待事件之日志等待事件解决的方法

我坚持每天看3套RAC的AWR,总结了一下. 查找日志等待事件的SQL: 9i:select * from v$event_name where name like '%log%';(大概14个左右) 10g: select name,wait_class from v$event_name where name like '%log%';(大概35个左右) 11g: select name,wait_class from v$event_name where name like '%log%'

vue -vantUI tab切换时 list组件不触发load事件解决办法

最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发 解决办法: 初始化定义了list的加载状态 tab切换时:重新初始化一次就行了 这样就解决了tab切换list组件不能再次被触发的问题 原文地址:http

当元素获得焦点和失去焦点时,触发 的事件。

我遇到一个问题,点击文本框时,文本框的值消失,点击文本框外时,值还原.经过一系列的过程, 解决的内容:如下: 下面内容摘取于Jquery. 当元素获得焦点时,触发 focus 事件. 可以通过鼠标点击或者键盘上的TAB导航触发.这将触发所有绑定的focus函数,注意,某些对象不支持focus方法. 当页面加载后将 id 为 'login' 的元素设置焦点: $(document).ready(function(){ $("#login").focus(); }); 使人无法使用文本框:

jquery移除、绑定、触发元素事件

unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() $('#btn').one("click",function(){.......}); 触发操作:trigger() 方法触发被选元素的指定事件类型. $('#btn').trigger("clic

react 中的blur事件

我们知道,想要手动触发blur事件时候,可以使用:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur Element.blur() 然而在react中,当你想手动触发一个input的blur事件时,你会得到一个错误:blur is not a function 在react中,当我们要操纵dom时候,我们一般会使用ref,比如focus事件: this.ref.current.focus() // 这个会运行的很好

input输入框change和blur事件区别

blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外. 1.没有进行任何输入时,不会触发change 在这种情况下失焦后,输入框并不会触发change事件,但一定会触发blur事件.在判断表单的修改状态时,这种差异会非常有用,通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹. 2.输入后值并没有发生变更 这种情况是指,在没有失焦的情况下,在输入框内进行的删除与输入操作,但最终的值与原值一样,这种情况