Javascript oninput：如何防止模糊（移動）射擊？

Question

我遇到了令人沮喪的問題。該input和change事件有不同的用途：

• input應激發每一個元素的值改變
• change當一個元素失去焦點應該火的時候，如果該值改變

也就是說行爲我看到，，但我在移動設備（Android Chrome）上測試時除了。在移動設備上，input事件在兩種情況下均觸發：每當發生更改時，和失去焦點時。

Here's a JSFiddle to test，並舉例：

<input id="input" type="text" /> 
<script> 
    // On mobile, this will fire an extra time when the input loses focus! 
    document.getElementById('input').addEventListener('input', console.log); 
</script> 

這是用一個組件我所期望的行爲發生衝突，而我並沒有多少運氣擺脫它。它正在被解僱之前的blur和change事件，所以我一直無法阻止它，並且我還沒有發現任何事件本身，它將它與常規input事件區分開來。任何人有想法？

我在Android Chrome 56.0.2924.87上測試，如果在其他移動瀏覽器上有類似的行爲，我一定會很感激。

Answer 1

你可能需要做的是將lastValue存儲在一個數組中，然後檢查當前值對lastValue，並且只有在有差異時纔會做。

let lastValue = null; 
document.getElementById('input').addEventListener('input',() => { 
    if (this.value === lastValue) { 
     return; // do nothing 
    } 

    lastValue = this.value; 
    // do something 
});