浅谈 Mousewheel 事件

mseed

当需要制作转动鼠标滚轮放大页面字体这样的交互效果时，会用到Mousewheel 事件。其实在大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。但杯具的是Firefox 3.5+ 却不支持此事件，不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件：”DOMMouseScroll” （事件和事件属性的测试案例）。

OK，我们现在已经知道了不同浏览器之间实现的差别，兼容代码如下：

1. var addEvent = (function(){
   
2.         if (window.addEventListener) {
   
3.             return function(el, sType, fn, capture) {
   
4.                 el.addEventListener(sType, fn, (capture));
   
5.             };
   
6.         } else if (window.attachEvent) {
   
7.             return function(el, sType, fn, capture) {
   
8.                 el.attachEvent("on" + sType, fn);
   
9.             };
   
10.         } else {
    
11.             return function(){};
    
12.         }
    
13.     })(),
    
14.     // isFirefox 是伪代码，大家可以自行实现
    
15.     mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
    
16. 
    
17. // object 也是伪代码，你需要注册 Mousewheel 事件的元素
    
18. addEvent(object, mousewheel, function(event){
    
19.     event = window.event || event;
    
20.     // todo something
    
21. }, false);

复制代码

我们再回到要实现的交互效果上，现在还有其他一些问题需要来解决：

• 页面字体到底是放大还是缩小呢？ ==> 鼠标滚轮是向上滚动还是向下滚动呢？
• 页面字体缩放的倍数到底是多少呢？ ==> 鼠标滚轮滚动的幅度大小是多少呢？
  

还好，我们可以通过 event 的某些属性值得到这些信息：

• “mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。
• “DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。
• “mousewheel” 事件在 Opera 10+ 中却是个特例，既有 “event.wheelDelta” 属性，也有 “event.detail” 属性。
  

注：上面第三点，在《The onmousewheel event of JavaScript》一文中有这样一段批注：

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE’s.

但经测试， Opera 9+ 和 Opera 10+ 中的 event.wheelDelta 属性与其他浏览器中的表现完全一致，未发现异常与错误，从接口角度来说，代码中应优先使用 “event.wheelDelta” 属性。

此时代码如下：

1. var addEvent = (function(){
   
2.         if (window.addEventListener) {
   
3.             return function(el, sType, fn, capture) {
   
4.                 el.addEventListener(sType, fn, (capture));
   
5.             };
   
6.         } else if (window.attachEvent) {
   
7.             return function(el, sType, fn, capture) {
   
8.                 el.attachEvent("on" + sType, fn);
   
9.             };
   
10.         } else {
    
11.             return function(){};
    
12.         }
    
13.     })(),
    
14.     stopEvent: function(event) {
    
15.         if (event.stopPropagation) {
    
16.             event.stopPropagation();
    
17.         } else {
    
18.             event.cancelBubble = true;
    
19.         }
    
20. 
    
21.         if (event.preventDefault) {
    
22.             event.preventDefault();
    
23.         } else {
    
24.             event.returnValue = false;
    
25.         }
    
26.     },
    
27.     zoomIn = function(){},
    
28.     zoomOut = function(){},
    
29.     // isFirefox 是伪代码，大家可以自行实现
    
30.     mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
    
31. 
    
32. // object 是伪代码，你需要注册 Mousewheel 事件的元素
    
33. addEvent(object, mousewheel, function(event){
    
34.     var delta = 0;
    
35.     event = window.event || event;
    
36.     stopEvent(event);
    
37. 
    
38.     delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3);
    
39.     // zoomIn, zoomOut 是伪代码，需要实现的缩放事件
    
40.     delta > 0 ? zoomIn(delta): zoomOut(Math.abs(delta));
    
41. } , false);

复制代码

事件和事件属性的测试案例：http://www.planabc.net/demo/event/mousewheel.html

扩展阅读：《Mouse wheel programming in JavaScript》