鼠标滚轮事件介绍

简介

　　IE6实现了鼠标滚轮事件mousewheel，这个事件包含了一个鼠标事件所没有的属性，wheelDelta，这

个属性值始终是120的倍数，而且向上滑动一单位，wheelDelta值为120，向下为-120.随后Chrome，Opera，

Safari等也都实现了该事件。Opera10之前的版本对wheelDelta值的符号处理错误，需要修改。但是Firefox没

有该事件，而是用DOMMouseScroll。这个事件只有Firefox支持，所以可以单独针对Firefox做兼容。

　　另外，HTML5为了兼容这两个事件，另外规定了一个标准版本wheel事件，比较新的浏览器基本实现了该事件。

chrome31+，Firefox 17+，IE9+，Safari 7.0.5以及新版使用webkit内核的Opera，使用Carakan内核的Opera

并不支持该事件。wheel事件有deltaX、deltaY和deltaZ属性，默认为100.

　　综上，目前wheel事件的兼容性其实并不理想，mousewheel的兼容性最佳，适用于除Firefox外的所有浏览器，对于

Firefox则单独做兼容处理。

　　

 1 addEvent = function(type,callback,useCapture){

 2     if(window.addEventListener){

 3         this.addEventListener(type,callback,!!useCapture);

 4     }else if(window.attachEvent){

 5         this.attachEvent('on'+type,callback);

 6     }

 7     return callback;

 8 }

 9 wheel = function(el,callback){

10     var type = 'mousewheel';

11     try{

12         document.createEvent('MouseScrollEvents');

13         type = 'DOMMouseScroll';

14     }catch(e){}

15     el.addEvent = addEvent;

16     el.addEvent(type,function(e){

17         e = e || window.event;

18         var wheelDelta,delta;

19         if('wheelDelta' in e){

20             wheelDelta = e.wheelDelta;  // 正数向上滚动

21             if(window.opera && window.opera.version() < 10){

22                 e.delta = parseInt(-wheelDelta) / 120;  // safari 下的wheeldelta为浮点数

23             }

24             e.delta = parseInt(wheelDelta) / 120;

25         }else if('detail' in e){

26             e.wheelDelta = -e.detail * 40; //修复firefox下没有wheelDelta的bug，detail为+-3

27             e.delta = e.wheelDelta / 120;

28         }

29         callback.call(el,e);

30         //阻止向上冒泡

31         e.stopPropagation && e.stopPropagation();

32         if("stopBubble" in e) e.stopBubble = true;

33         return false;

34     },false);

35 };