jQuery停止.blur（）事件點擊「提交」按鈕時

Question

我正在用簡單的演示電子郵件註冊表單構建一個小的着陸頁。我希望在聚焦時打開表單域，然後縮小模糊。

但是，我面臨的問題是，當你點擊提交按鈕，這會激發模糊功能，隱藏按鈕並縮小窗體。我只需要找到一種方法來停止.blur（）方法，只有當用戶點擊以專注於提交按鈕時。有沒有什麼好的解決方法？

希望我能得到任何幫助！

Answer 1

這不是最漂亮的解決方案，但它確實有效。試試這個：

$("#submitbtn").mousedown(function() { 
    mousedownHappened = true; 
}); 

$("#email").blur(function() { 
    if (mousedownHappened) // cancel the blur event 
    { 
     mousedownHappened = false; 
    } 
    else // blur event is okay 
    { 
     $("#email").animate({ 
      opacity: 0.75, 
      width: '-=240px' 
     }, 500, function() { 
     }); 

     // hide submit button 
     $("#submitbtn").fadeOut(400); 
    } 
});​ 

DEMO HERE

Answer 2

試試這個.blur處理程序中：

if ($(':focus').is('#submitbtn')) { return false; } 

Answer 3

爲什麼不靠submit事件，而不是click？ http://jsbin.com/ehujup/5/edit

只是情侶變成HTML和JS

包裝投入的form並添加required電子郵件，因爲它顯然假設是

<form id="form"> 
<div id="signup"> 
    <input type="email" name="email" id="email" placeholder="me@email.com" tabindex="1" required="required"> 
    <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2"> 
</div> 
</form> 

在JS

，刪除處理這聽#submitbtn

$("#submitbtn").on("click", function(e){ 
    e.stopImmediatePropagation(); 
    $("#signup").fadeOut(220); 
}); 

並改用提交表單監聽器

$("#form").on("submit", function(e){ 
    $("#signup").fadeOut(220); 
    return false; 
}); 

您可以使用$.ajax()使其更好。

這樣做您可以在驗證方面獲得積極意義，並且本機瀏覽器的HTML5驗證程序將在支持它的地方使用檢查電子郵件格式。

Answer 4

我知道這個問題是舊的，但最簡單的方法是檢查event.relatedTarget。 if語句的第一部分是爲了防止在relatedTarget爲null時引發錯誤（IF會短路，因爲null等價於false，並且瀏覽器知道如果第一個條件爲false，它不必檢查第二個條件在聲明中的& &）。

所以：

if(event.relatedTarget && event.relatedTarget.type!="submit"){ 
    //do your animation 
}