當需要制作轉動鼠標滾輪放大頁面字體這樣的交互效果時,會用到 Mousewheel 事件。其實在大多數浏覽器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 卻不支持此事件,不過慶幸 Firefox 3.5+ 中提供了另外一個等同的事件:”DOMMouseScroll” (事件和事件屬性的測試案例)。
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);
我們再回到要實現的交互效果上,現在還有其他一些問題需要來解決:
- 頁面字體到底是放大還是縮小呢? ==> 鼠標滾輪是向上滾動還是向下滾動呢?
- 頁面字體縮放的倍數到底是多少呢? ==> 鼠標滾輪滾動的幅度大小是多少呢?
還好,我們可以通過 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” 屬性。
此時代碼如下:
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);
事件和事件屬性的測試案例:http://www.planabc.net/demo/event/mousewheel.html
擴展閱讀:《Mouse wheel programming in JavaScript》