监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题

1.问题描述

当在监听input失去焦点的事件的时候,在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发

2.代码

<body>
		<div id="divContainer">
			<input class="inTest" />
			<button class="btn-send">发送</button>
		</div>
		<script type="text/javascript">
			$(function(){
				$(".inTest").focus(function(){
					
				}).blur(function(){
					alert("-----blur----");
				});
				$(".btn-send").click(function(e){
					alert("-----click----");
				});
			});
		</script>
</body>

3.效果图

4.解决办法

由于失去焦点事件发生的顺序在点击事件之前,这样我预期的触发点击事件的效果就达不到,为了达到触发点击事件,我在失去焦点时间里面加了setTimeout()方法,让失去焦点事件延迟500毫秒再触发,这样就调换了失去焦点和按钮点击事件的顺序,做到我所期待的效果

5.解决之后的代码

<body>
		<div id="divContainer">
			<input class="inTest" />
			<button class="btn-send">发送</button>
		</div>
		<script type="text/javascript">
			$(function(){
				$(".inTest").focus(function(){
					
				}).blur(function(){
					setTimeout(function(){//添加时间定时器
						alert("-----blur----");
					},500);
				});
				$(".btn-send").click(function(e){
					alert("-----click----");
				});
			});
		</script>
</body>

6.解决之后的效果图

猜你喜欢

转载自my.oschina.net/u/3680343/blog/1822695