從jQuery中的第一個處理程序中防止其他事件處理程序

Question

我在頁面上有輸入字段並提交按鈕。

<form id="searchform"> 
<input id="s" type="search" autocomplete="off" name="s" value=""> 
<div id="search-submit" class="input-group-addon"> 
    <i>SUBMIT</i> 
</div> 
</form> 

這裏是jQuery代碼：

var inProgress = false; 

$("#search-submit").on("click", function() { 
    inProgress = true; 
    alert ("Form Submit"); 
    inProgress = false; 
}); 

$("#s").blur(function() { 
    if (! inProgress) { 
     alert ("Blur"); 
    inProgress = false; 
    } 
}); 

我想，以防止模糊，如果從輸入字段點擊提交格，但要允許它，如果從輸入字段點擊到的其它部分頁。我無法使用按鈕進行提交。

我都忍了小提琴jsfiddle.net/405kzboh/1

但現在我甚至不明白爲什麼Click事件不會觸發模糊事件之前，如果有人從輸入點擊提交！

Answer 1

目標元素上的mousedown事件將在文本框上的blur事件之前調用，以便您可以掛鉤該事件以設置您的進行中標誌。

var inProgress = false; 

$("#search-submit").on("mousedown", function() { 
    inProgress = true; 
}); 

$("#search-submit").on("click", function() { 
    console.log ("Form Submit"); 
    inProgress = false; 
}); 

$("#s").on("blur", function() { 
    if (! inProgress) { 
     console.log ("Blur"); 
    } 
}); 

我已經更新了小提琴：http://jsfiddle.net/405kzboh/2/

Answer 2

您可以跟蹤事件時間戳和blur事件處理程序中的if語句使用它作爲一個條件。而且你將不得不延遲if語句以便點擊事件可以註冊。 var inProgress = false; //初始化 var oEvent = {click：0，blur：0};

$("#search-submit").on("click", function(e) { 
    //capture click timestamp 
    oEvent[e.type] = e.timeStamp; 
    inProgress = true; 
    alert ("Form Submit"); 
    inProgress = false; 
}); 

$("#s").on("blur", function (e) { 
    //capture blur timestamp 
    oEvent[e.type] = e.timeStamp; 

    //delay this code so click can register 
    setTimeout(function() { 

     //check if click happened after blur 
     if (! inProgress && oEvent.click < oEvent.blur) { 
      alert ("Blur"); 
      inProgress = false; 
     } 
    }, 500); 
}); 

DEMO

Answer 3

Reference: http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event 

Solution 1: stop event propogation in mousedown event, if you want to go with the click event 

$("#search-submit").on("click", function() {  
    inProgress = true 
    alert ("Form Submit"); 
    inProgress = false;  
}); 

$("#s").on("blur", function (e) { 
    e.stopPropagation(); 
    if (! inProgress) { 
     alert ("Blur"); 
     inProgress = false; 
    } 
}); 

$("#search-submit").on("mousedown", function(event) { 
    event.preventDefault(); 
}); 


Solution:2 -> use mousedown instead of click event 

$("#search-submit").on("mousedown", function(event) {  
    inProgress = true; 
    alert ("Form Submit"); 
    inProgress = false; 
    $("#s").off("blur"); 
}); 

$("#s").on("blur", function (e) { 
    e.stopPropagation(); 
    if (! inProgress) { 
     alert ("Blur"); 
     inProgress = false; 
    } 
}); 

Answer 4

我並沒有意識到，點擊之前模糊事件觸發，所以我需要使用onmousedown事件事件捉對事業部的點擊。

這裏所有的回答都不錯，但更復雜的比它應該是，所以我拿出自己的解決方案：

$("#search-submit").on("mousedown", function(event) { 
    event.preventDefault(); 
    console.log ("Form Submit"); 
}); 

$("#s").on("blur", function() { 
    console.log ("Blur"); 
}); 

Updated Fiddle