IE6.0首先实现了mousewheel事件。此后,Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互,在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome及Safari)对象。与mousewheel事件对应的event对象除包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta属性。当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数,当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数。将mousewheel事件处理程序指定给页面中的任何元素或document对象,即可处理鼠标滚轮的交互操作。来看下面的例子。
<script type="text/javascript"> (function(){ //我们将相关代码放在了一个私有作用域中,从而不会让新定义的函数干扰全局作用域。 //如果指定的事件不存在,则为该事件指定处理程序的代码就会静默地失败。 function getWheelDelta(event){ if(event.wheelDelta){ return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); }else{ return -event.detail * 40; } } if(document.addEventListener){ document.addEventListener('mousewheel',function(event){ var delta=getWheelDelta(event); LS.log.write(delta); },false); document.addEventListener('DOMMouseScroll',function(event){ var delta=getWheelDelta(event); LS.log.write(delta); },false); }else if(document.attachEvent){ document.attachEvent('onmousewheel',function(event){ var delta=getWheelDelta(event); LS.log.write(delta); }); } })(); </script>
这个例子会在发生mousewheel事件时显示wheelDelta的值。多数情况下,只要知道鼠标滚轮滚动的方向就够了,而这通过检测wheelDelta的正负号就可以确定。有一点要注意:在Opera 9.5之前的版本中,wheelDelta值的正负号是颠倒的。如果你打算支持早期的Opera版本,就需要使用浏览器检测技术来确定实际的值。由于mousewheel事件非常流行,而且所有浏览器都支持它,所以HTML 5也加入了该事件。Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚轮滚动时触发。与mousewheel事件一样,DOMMouseScroll也被视为鼠标事件,因而包含与鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中,当向前滚动鼠标滚轮时,这个属性的值是-3的倍数,当向后滚动鼠标滚轮时,这个属性的值是3的倍数。可以将DOMMouseScroll事件添加到页面中的任何元素,而且该事件会冒泡到window对象。