我應該如何在導致模糊的單擊事件之後觸發Javascript模糊事件？

Question

我遇到了這個問題幾次，我對我以前使用的解決方案並不滿意。

我有一個模糊事件輸入框，驗證它的內容和一個按鈕，它將填充輸入框點擊。問題在於點擊按鈕觸發輸入模糊事件，然後點擊按鈕點擊事件，以便按鈕插入的內容不是經過驗證的內容。

見http://jsfiddle.net/jakecr/dL3K3/

我知道這是正確的行爲，但我不能想到一個乾淨的方式來解決這個問題。

Answer 1

我們在工作中遇到了類似的問題。我們在最後的 中發現的是，mousedown事件將在模糊事件 之前觸發，從而允許您在驗證之前設置內容，甚至取消完全使用標誌的驗證 過程。

檢查這個撥弄我使用例 - 由 http://jsfiddle.net/dL3K3/31/

$(function(){ 
    var flag = true; 
    $('input').blur(function(){ 
     if(!$(this).val() && flag){ 
      alert("Grrr, It's empty"); 
     } 
    }); 

    $('button').mousedown(function(){ 
     flag = false; 
    });  
    $('button').mouseup(function(){ 
     flag = true; 
     $('input').val('content').focus(); 
    }); 

}); 

CNC中

由於@mclin建議，用鼠標按下事件的preventDefault將防止模糊的行爲。 ，你可以直接離開原來的單擊事件完整 -

http://jsfiddle.net/dL3K3/364/

$(function(){ 
    $('input').blur(function(){ 
     if(!$(this).val()){ 
      alert("Grrr, It's empty"); 
     } 
    }); 

    $('button').mousedown(function(e){ 
     e.preventDefault(); 
    });  
    $('button').click(function(){ 
     $('input').val('content'); 
    }); 

}); 

這種解決方案可能是有點清潔，更好的爲大多數情況下只需要注意的是，如果你使用它，你會的preventDefault和模糊目前關注的任何其他元素，但對於大多數不應該成爲問題的用例。

Answer 2

將輸入驗證邏輯分離爲自己的函數，該函數由blur事件自動調用，然後在修改輸入框中的值之後通過單擊事件調用。真的，你的驗證邏輯會被調用兩次，但我沒有看到一個方法，沒有做出更多的更改。

示例使用jQuery：

$('input').blur(function() { 
    validate(this); 
}); 

$('submit').click(function() { 
    //modify the input element 
    validate(inputElement); 
}); 

var validate = function(obj) { 
    // validate the object 
} 

Answer 3

這也可能有助於：

設置延遲模糊事件操作它觸發按鈕單擊事件之前的計時器。

// Namespace for timer var setTimer = { timer: null } 

    $('input,select').blur(function() { 
     setTimer.timer = setTimeout(function() { 
      functionCall(); 
     }, 1000); 
    }); 

    $('input,select').focus(function() { 
     setTimer.timer = setTimeout(function() { 
      functionCall(); 
     }, 1000); 
    }); 

    $("#btn").click(function() { 
     clearTimeout(setTimer.timer); 
     functionCall(); 
    }); 

Answer 4

技巧是不使用模糊和點擊事件，因爲它們總是先按照模糊順序執行，然後單擊第二個。相反，您應該檢查焦點元素何時發生變化，因爲只有在點擊後纔會發生變化。

我覺得我有這一個優雅的解決方案：

var alreadyValidated = 'true'; 

setInterval(function(){ 
    if(document.activeElement.id != 'validation-field-id'){ 
     if(alreadyValidated=='false'){ 
      alreadyValidated = 'true'; 
      validate(document.activeElement);  
     } 
    } 
    else { 
     alreadyValidated = 'false'; 
    } 
}, 200); 

這些天所有現代瀏覽器都支持document.activeElement。

Answer 5

我有比Yoni Jah更好的解決方案： 在按鈕的mousedown事件中調用preventDefault。onBlur永遠不會發生，所以你可以在點擊事件中自由地做任何事情。

這比較好，因爲它不會改變點擊行爲，而是讓鼠標向下而不是鼠標向上發生，這可能是意想不到的。

Answer 6

有時在mouseup上獲取子對象是有用的，但是父母想要在模糊時隱藏子對象。我們可以取消子元素的隱藏，然後等到我們的鼠標鬆開時，再用力模糊當我們準備

JS

var cancelHide = false; 

$('.my-input').blur(function() { 
    if (!cancelHide) { 
     $('.my-item').hide(); 
    } 
}); 

$('.my-input').click(function() { 
    $('.my-item').show(); 
}); 

$('.my-item').mousedown(function() { 
    cancelHide = true; 
}); 

$('.my-item').mouseup(function() { 
    var text = $(this).text(); 
    alert(text); 
    cancelHide = false; 
    $('.my-input').blur(); 
}); 

HTML

<input type="text" class="my-input"/> 
<div class="my-item">Hello</div> 
<div class="my-item">Lovely</div> 
<div class="my-item">World</div> 

發生

css

.my-item { 
    display:none; 
} 

https://jsfiddle.net/tic84/on421rxg/

單擊列表中的項目將只在鼠標鬆開警戒，儘管父母極力掩飾他們對模糊