其实在大多数浏览器（ie6, ie7, ie8, opera 10+, safari 5+）中，都提供了 “mousewheel” 事件。但杯具的是 firefox 3.5+ 却不支持此事件，不过庆幸 firefox 3.5+ 中提供了另外一个等同的事件：”dommousescroll” （事件和事件属性的测试案例）。
mousewheel event in javascriptmousewheel event in javascript ie6, ie7, ie8, opera 10+, safari 5+ support mousewheel. firefox 3.5+ support dommousescroll. ie6, ie7, ie8, opera 10+, safari 5+ support event.wheeldelta. firefox 3.5+, opera 10+ support event.detail. the event.wheeldelta value is a multiple of 120. the event.detail value is a multiple of 3. mousewheel event: mousewheel
mousewheel event: dommousescroll
related articles: http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
ok，我们现在已经知道了不同浏览器之间实现的差别，兼容代码如下：
复制代码 代码如下:
var addevent = (function(){
if (window.addeventlistener) {
return function(el, stype, fn, capture) {
el.addeventlistener(stype, fn, (capture));
};
} else if (window.attachevent) {
return function(el, stype, fn, capture) {
el.attachevent(on + stype, fn);
};
} else {
return function(){};
}
})(),
// isfirefox 是伪代码，大家可以自行实现
mousewheel = isfirefox ? dommousescroll : mousewheel;
// object 也是伪代码，你需要注册 mousewheel 事件的元素
addevent(object, mousewheel, function(event){
event = window.event || event;
// todo something
}, false);
我们再回到要实现的交互效果上，现在还有其他一些问题需要来解决：
1. 页面字体到底是放大还是缩小呢？ ==> 鼠标滚轮是向上滚动还是向下滚动呢？
2. 页面字体缩放的倍数到底是多少呢？ ==> 鼠标滚轮滚动的幅度大小是多少呢？
还好，我们可以通过 event 的某些属性值得到这些信息：
1. “mousewheel” 事件中的 “event.wheeldelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。
2. “dommousescroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheeldelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 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” 属性。
此时代码如下：
复制代码 代码如下:
var addevent = (function(){
if (window.addeventlistener) {
return function(el, stype, fn, capture) {
el.addeventlistener(stype, fn, (capture));
};
} else if (window.attachevent) {
return function(el, stype, fn, capture) {
el.attachevent(on + stype, fn);
};
} else {
return function(){};
}
})(),
stopevent: function(event) {
if (event.stoppropagation) {
event.stoppropagation();
} else {
event.cancelbubble = true;
}
if (event.preventdefault) {
event.preventdefault();
} else {
event.returnvalue = false;
}
},
zoomin = function(){},
zoomout = function(){},
// isfirefox 是伪代码，大家可以自行实现
mousewheel = isfirefox ? dommousescroll : mousewheel;
// object 是伪代码，你需要注册 mousewheel 事件的元素
addevent(object, mousewheel, function(event){
var delta = 0;
event = window.event || event;
stopevent(event);
delta = event.wheeldelta ? (event.wheeldelta / 120) : (- event.detail / 3);
// zoomin, zoomout 是伪代码，需要实现的缩放事件
delta > 0 ? zoomin(delta): zoomout(math.abs(delta));
} , false);