数字输入滚动的 HTML5 事件监听器 - 仅限 Chrome答案

【问题标题】：HTML5 event listener for number input scroll - Chrome only数字输入滚动的 HTML5 事件监听器 - 仅限 Chrome
【发布时间】：2011-08-05 20:49:24
【问题描述】：

我正在玩一些 HTML5 元素，并遇到了一个有趣的行为。这仅适用于 Chrome。

使用数字输入类型，您可以设置最小值、最大值和步长，并通过上下箭头来控制输入。 <input type="number" min="0" max="100" step="5" />

我发现绑定单击事件侦听器会捕获箭头上的按下，因为在字段模糊之前不会真正发生更改。您还可以使用键盘上的向上和向下箭头键在限制范围内更改值，并且按键绑定可以获取这些值。

但是，在 Chrome 中，您也可以使用鼠标滚轮来更改输入，方法是将鼠标悬停在输入上并滚动。但是，我一直无法找到监听此事件的方法。

Example on jsfiddle

HTML：

<input type="number" min="0" max="100" step="5" id="test" />

JavaScript（使用 jQuery）：

$( '#test' ).click(function(){
   $( this ).after( '<br />click' ); 
});

$( '#test' ).change(function(){
   $( this ).after( '<br />change' ); 
});

$( '#test' ).keypress(function(){
   $( this ).after( '<br />keypress' ); 
});

关于如何监听滚动变化的任何想法？同样，在撰写本文时，这仅适用于 Chrome。

【问题讨论】：

虽然不能回答您的问题，但您也可以考虑使用 setTimeout 循环跟踪值的更改，替换所有事件处理程序。性能不是很好，但适用于任何输入法。
完全可以。甚至只是在焦点上启动计时器，然后在模糊时将其杀死。这样的边缘案例我不会在生产中担心它，但我对理论值很好奇。
FWIW - 当您滚动数字输入字段或单击增量按钮时，看起来 chrome 现在会触发更改事件。

标签： jquery html google-chrome event-handling

【解决方案1】：

jQuery 鼠标滚轮插件似乎可以解决问题。 http://plugins.jquery.com/project/mousewheel

$( '#test' ).mousewheel(function(){
   $( this ).after( '<br />mouse wheel' ); 
});

【讨论】：

I forked the OP's jsFiddle with that plugin，展示你的解决方案
虽然 jQuery 不支持开箱即用，如果您不想在每次缺少功能时都导入插件，您可以使用 vanilla listener $('#test')[0].addEventListener('mousewheel', function(){ $('#test').after( '<br />scroll' ); });