javascript - Chrome 上数字输入类型和 jquery .on ('change' ) 函数的意外行为

Question

我有一个数字输入类型和一个 jQuery .on('change') 函数，该函数在每次输入值更改时运行。

使用 chrome 时，如果您连续单击输入上的箭头以增加或减少值(将鼠标留在箭头的可单击区域内)，该函数会在前几次触发，然后就停止了。如果您随后将鼠标移到箭头的可点击区域之外，JavaScript 函数就会运行。

有人知道我该如何处理吗？或者是否有任何解决方法。

请看下面的例子。

$('#number').on('change', function(){
	console.log('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="number"/>

Answer 1

好吧，要避免它很简单。 Change 仅在元素失去 focus 时触发。但您在这里所做的基本上是 click，因此如果有人使用键盘输入值，请使用该事件和 keyup。

这是一个有效的 fiddle :

$('#number').on('keyup click', function(){
	console.log('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="number"/>