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

Question

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

使用镶边时,如果你不断点击输入上的箭头来增加或减少数值(将鼠标留在箭头的可点击区域内),该功能会在前几次触发,然后停止.如果您然后将鼠标移动到箭头的可单击区域之外,则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如果有人使用键盘输入值.

这是一个工作小提琴:

$('#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"/>