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

Question

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

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

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

在Chrome中，然而，你也可以使用你的鼠标滚轮改变输入，通过悬停在输入和滚动。然而，我还没能找到一种方法来监听这个事件。

关于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浏览器。

Answer 1

jQuery鼠标滚轮插件似乎可以做到这一点。http://plugins.jquery.com/project/mousewheel

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