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

Question

我正在使用一些HTML5元素进行尝试，并遇到了有趣的行为。这仅适用于Chrome浏览器。

使用数字输入类型，您可以设置最小值、最大值和步长，并获得上下箭头以控制输入。例如：<input type="number" min="0" max="100" step="5" /> 我发现绑定点击事件监听器可以捕获箭头的按压，因为在模糊字段之前不会实际发生更改。您也可以使用键盘上的向上和向下箭头键在限制范围内更改值，并且可以通过keypress bind来捕获这些内容。

然而，在Chrome浏览器中，您还可以使用鼠标滚轮来更改输入，只需将鼠标悬停在输入上并滚动即可。但是，我尚未找到一种监听此事件的方法。

在jsfiddle上的示例： http://jsfiddle.net/ppDFV/

<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中有效。

- hookedonwinter

---

虽然这不是你问题的答案，但你也可以考虑使用setTimeout循环来跟踪值的更改，替换所有事件处理程序。性能不是很好，但适用于任何输入方法。 - Scott Reynen

完全可以。甚至只需在焦点上启动计时器，在模糊时停止它。这是一个边缘情况，我不会在生产中担心它，但出于理论价值的好奇心。 - hookedonwinter

就此而言，看起来Chrome现在会在您滚动数字输入字段或单击增量按钮时触发更改事件。 - Sam Dufel

Answer 1

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

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

- jeff_bail

---

我使用那个插件fork了OP的jsFiddle，展示了你的解决方案：http://jsfiddle.net/V9Uck/ - ExtraGravy

虽然jQuery默认不支持此功能，如果您不想每次缺少某个功能时都导入插件，您可以使用原生监听器$('#test')[0].addEventListener('mousewheel', function(){ $('#test').after( '<br />scroll' ); });。 - zeachco