您当前的位置:首页 > 网站建设笔记 >

mousewheel DOMMouseScroll鼠标滚轮事件

0

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);
      ADS.log.write(delta);
    },false);
    document.addEventListener("DOMMouseScroll",function(event){
      var delta=getWheelDelta(event);
      ADS.log.write(delta);
    },false);
  }else if(document.attachEvent){
    document.attachEvent("onmousewheel",function(event){
      var delta=getWheelDelta(event);
      ADS.log.write(delta);
    });
  }
})();
</script>

这个例子会在发生mousewheel事件时显示wheelDelta的值。多数情况下,只要知道鼠标滚轮滚动的方向就够了,而这通过检测wheelDelta的正负号就可以确定。有一点要注意:在Opera 9.5之前的版本中,wheelDelta值的正负号是颠倒的。如果你打算支持早期的Opera版本,就需要使用浏览器检测技术来确定实际的值。由于mousewheel事件非常流行,而且所有浏览器都支持它,所以HTML 5也加入了该事件。Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚轮滚动时触发。与mousewheel事件一样,DOMMouseScroll也被视为鼠标事件,因而包含与鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中,当向前滚动鼠标滚轮时,这个属性的值是-3的倍数,当向后滚动鼠标滚轮时,这个属性的值是3的倍数。可以将DOMMouseScroll事件添加到页面中的任何元素,而且该事件会冒泡到window对象。

顶部中部底部