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

最新推荐文章于 2024-06-21 16:11:55 发布

weixin_34351321

最新推荐文章于 2024-06-21 16:11:55 发布

阅读量5.9k

点赞数

文章标签： javascript python java ViewUI

原文链接：https://my.oschina.net/u/3680343/blog/1822695

版权

2019独角兽企业重金招聘Python工程师标准>>>

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.解决之后的效果图