淺談 Mousewheel 事件_關於JavaScript

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談 Mousewheel 事件

淺談 Mousewheel 事件

編輯：關於JavaScript

其實在大多數浏覽器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 卻不支持此事件，不過慶幸 Firefox 3.5+ 中提供了另外一個等同的事件：”DOMMouseScroll” （事件和事件屬性的測試案例）。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Mousewheel Event in JavaScript</title> 
<style> 
body { 
padding:5px 10px; 
} 
.box { 
width:300px; 
height:150px; 
padding:10px; 
border:1px solid #999; 
background:#999; 
margin-bottom:20px; 
} 
.result strong { 
color:#f00; 
} 
</style> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"></head> 
<body> 
<h1>Mousewheel Event in JavaScript</h1> 
<ol> 
<li>IE6, IE7, IE8, Opera 10+, Safari 5+ support mousewheel.</li> 
<li>Firefox 3.5+ support DOMMouseScroll.</li> 
<li>IE6, IE7, IE8, Opera 10+, Safari 5+ support event.wheelDelta. </li> 
<li>Firefox 3.5+, Opera 10+ support event.detail.</li> 
<li>The event.wheelDelta value is a multiple of 120. </li> 
<li>The event.detail value is a multiple of 3.</li> 
</ol> 
Mousewheel Event: mousewheel 
Mousewheel Event: DOMMouseScroll  
<p id="J_Result" class="result"></p> 
<p>Related Articles: http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/</p> 
 
</body> 
</html>

[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);

關於JavaScript

JavaScript判斷對象是否為數組: 文中為大家分享了三種JavaScript判斷對象是否為數組的方法，1. typeof首先我們會想到的
JS代碼優化技巧之通俗版(減少js體積): 細讀完這篇文章，夠你優化大半天的了，關於JS優化方法大都脫離不了這三種方法。（網頁總大小為155.
JavaScript檢測上傳文件大小的方法: 本文實例講述了JavaScript檢測上傳文件大小的方法。分享給大家供大家參考。具體如下：通過JS客

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章