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

Question

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

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

我发现绑定一个click事件监听器会捕获箭头上的按下,因为在字段模糊之前实际上不会发生更改.您还可以使用键盘上的向上和向下箭头键来更改限制范围内的值,按键绑定可以选择这些键.

但是,在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 Mouse Wheel插件似乎可以解决这个问题.http://plugins.jquery.com/project/mousewheel

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