HTML結構：很簡單，就一個input,一個div，能說明問題就OK了；

<input type="text" value="默認值"><br/><br/><div>搜索</div>

想要實現的結果：

1、input框獲取焦點時value為“”，失去焦點時value為“默認值”；-----這個很好實現；　　　　　　　　

2、當在input框中輸入要搜素的內容后，點擊div搜索，要求控制臺打印輸出要搜素的內容（當然每個項目的需求不同，這里只是舉個例子），而且要求點擊后不影響input的focus和blur行為；----這個才是重點

先看看沖突沒有解決之前的效果;

$("input").focus(function () { this.value = ""; }).blur(function () { this.value = "默認值"; });$("div").click(function () { var value = $("input").val(); console.log(value); });

結果：在input中輸入“aaaa”,然后點擊div,控制臺輸出的卻是“默認值”，與預想的結果不符;

解決方法一：在blur的回調函數中加一個定時器，延遲blur回調函數的執行時間，這樣的話雖然在點擊div的時候，input的blur行為先被觸發，但是由于加了定時器延遲，所以得等到div的click回調執行完成后才能執行input的blur行為的回調；

$("input").focus(function () { this.value = "";}).blur(function () { var self=this; setTimeout(function(){ self.value = "默認值"; },300)}); $("div").click(function () {//這部分不變 var value = $("input").val(); console.log(value); });

結果：在input中輸入“aaaa”,然后點擊div,控制臺輸出的卻是“aaaa”，符合預想的結果;

解決方法二：將div的click事件改成mousedown事件，因為mousedown行為是鼠標點下去的時候就被觸發，而click行為是鼠標點下去再抬起的時候才被觸發

$("input").focus(function () {//這部分不變 this.value = "";}).blur(function () { this.value = "默認值";}); $("div").mousedown(function () { var value = $("input").val(); console.log(value); });

結果：在input中輸入“aaaa”,然后點擊div,控制臺輸出的卻是“aaaa”，符合預想的結果;

以上所述是小編給大家介紹的jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題，希望對大家有所幫助,如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！