快捷導(dǎo)航

JavaScript 滾輪事件使用說明

更新時(shí)間：2010年03月07日 14:41:24 作者：

用過 Google 地圖的人可能都很熟悉，通過滾動(dòng)滾輪可以對地圖進(jìn)行縮放，非常地方便。適當(dāng)?shù)厥褂脻L輪事件可以帶來不錯(cuò)的用戶體驗(yàn)。

不過遺憾的是各瀏覽器都不盡相同。

一) 事件名稱不相同
IE, KHTML(Safari, Chrome), Opera對應(yīng)的事件名稱是 "mousewheel"。而 Gecko(Firefox, Netscape) 對應(yīng)的事件名稱是 "DOMMouseScroll"。

二) 事件對象的屬性不一樣
有時(shí)我們需要知道用戶是向上滾了還是向下滾了。例如我們有一個(gè)響應(yīng)滾動(dòng)事件的函數(shù):

復(fù)制代碼代碼如下:

 
function wheelHandle(e) { 
if(e.wheelDelta) {// IE, KHTML, Opera 
alert(e.wheelDelta > 0 ? '向上滾' : '向下滾'); 
} else { // Gecko 
alert(e.detail < 0 ? '向上滾' : '向下滾'); 
} 
} 

IE, KHTML 支持 e.wheelDelta ,大于 0 為向上滾動(dòng)，小于 0 為向下滾動(dòng)。Gecko 支持 e.detail，小于 0 為向上滾動(dòng)，大于 0 為向上滾動(dòng)，跟前面的相反。而 Opera 比較牛，兩種都支持。
下面給出一個(gè)注冊滾輪事件的函數(shù)做參考：

復(fù)制代碼代碼如下:

 
/** 
* 注冊滾輪事件函數(shù) 
* @param element : 注冊的事件對象 
* @param wheelHandle : 注冊事件函數(shù) 
*/ 
function addScrollListener(element, wheelHandle) { 
if(typeof element != 'object') return; 
if(typeof wheelHandle != 'function') return; 
// 監(jiān)測瀏覽器 
if(typeof arguments.callee.browser == 'undefined') { 
var user = navigator.userAgent; 
var b = {}; 
b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object"; 
b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera; 
b.ie = user.indexOf("MSIE") > -1 && !b.opera; 
b.gecko = user.indexOf("Gecko") > -1 && !b.khtml; 
arguments.callee.browser = b; 
} 
if(element == window) 
element = document; 
if(arguments.callee.browser.ie) 
element.attachEvent('onmousewheel', wheelHandle); 
else 
element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false); 
} 

注冊一個(gè)監(jiān)聽事件：

復(fù)制代碼代碼如下:

 
var display = document.getElementById('display'); 
function wheelHandle(e) { 
if(e.wheelDelta) {// IE, KHTML, Opera 
display.innerHTML = (e.wheelDelta > 0 ? '上' : '下'); 
} else { // Gecko 
display.innerHTML = (e.detail < 0 ? '上' : '下'); 
} 
} 
addScrollListener(window, wheelHandle); 

您可能感興趣的文章: