JavaScript滾輪事件使用說明_javascript技巧

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

二) 事件對(duì)象的屬性不一樣
有時(shí)我們需要知道用戶是向上滾了還是向下滾了。例如我們有一個(gè)響應(yīng)滾動(dòng)事件的函數(shù):
代碼如下:
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è)注冊(cè)滾輪事件的函數(shù)做參考：
代碼如下:
/**
* 注冊(cè)滾輪事件函數(shù)
* @param element : 注冊(cè)的事件對(duì)象
* @param wheelHandle : 注冊(cè)事件函數(shù)
*/
function addScrollListener(element, wheelHandle) {
if(typeof element != 'object') return;
if(typeof wheelHandle != 'function') return;
// 監(jiān)測(cè)瀏覽器
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);
}

注冊(cè)一個(gè)監(jiān)聽事件：
代碼如下:
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);

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com