js(jquery)解決input元素的blur事件和其他非表單元素的click事件衝突的方法

標籤：

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”，符合預想的結果;

 

js(jquery)解決input元素的blur事件和其他非表單元素的click事件衝突的方法