JavaScript ONUTPUT:如何防止在Blur(移动)上触发

Question

我遇到了一个令人沮丧的问题。input和change事件具有不同的用途：

• input每次元素的值都会发射
• change当元素失去焦点时，如果值更改，则应发射

那是我看到的行为，在我在Mobile（Android Chrome）上测试时。在移动设备上，input事件都针对两种情况都发射：每次发生更改时，和失去焦点时。

这是一个可以测试的JSFIDDLE，也是一个示例：

<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
});