監聽input輸入框的失去焦點事件與按鈕點擊事件執行的順序問題

時間 2019-11-06

標籤監聽 input 輸入失去焦點事件按鈕點擊執行順序問題简体版

原文原文鏈接

1.問題描述javascript

當在監聽input失去焦點的事件的時候，在input輸入框輸入一段文字以後，點擊發送按鈕會發現，只觸發了失去焦點事件，按鈕點擊事件並無被觸發，當再次點擊按鈕的時候，事件纔會被觸發html

2.代碼java

<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.效果圖code

4.解決辦法htm

因爲失去焦點事件發生的順序在點擊事件以前，這樣我預期的觸發點擊事件的效果就達不到，爲了達到觸發點擊事件，我在失去焦點時間裏面加了setTimeout()方法，讓失去焦點事件延遲500毫秒再觸發，這樣就調換了失去焦點和按鈕點擊事件的順序，作到我所期待的效果事件

5.解決以後的代碼ip

<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.解決以後的效果圖input

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。