快捷導(dǎo)航

JavaScript 滾輪事件使用說(shuō)明

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

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

不過(guò)遺憾的是各瀏覽器都不盡相同。

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

二) 事件對(duì)象的屬性不一樣
有時(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è)注冊(cè)滾輪事件的函數(shù)做參考：

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

 
/** 
* 注冊(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)聽(tīng)事件：

復(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); 

您可能感興趣的文章:

相關(guān)文章

three.js實(shí)現(xiàn)圓柱體
這篇文章主要為大家詳細(xì)介紹了three.js實(shí)現(xiàn)圓柱體的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
javascript 刪除數(shù)組元素和清空數(shù)組的簡(jiǎn)單方法
這篇文章主要介紹了javascript 刪除數(shù)組元素和清空數(shù)組的簡(jiǎn)單方法的相關(guān)資料,需要的朋友可以參考下
2017-02-02
如何用JS實(shí)現(xiàn)網(wǎng)頁(yè)瀑布流布局
這篇文章主要介紹了如何用JS實(shí)現(xiàn)網(wǎng)頁(yè)瀑布流布局，幫助大家更好的利用JavaScript制作網(wǎng)頁(yè)，感興趣的朋友可以了解下
2021-04-04
使用Three.js實(shí)現(xiàn)太陽(yáng)系八大行星的自轉(zhuǎn)公轉(zhuǎn)示例代碼
這篇文章主要給大家介紹了關(guān)于如何使用Three.js實(shí)現(xiàn)太陽(yáng)系八大行星的自轉(zhuǎn)公轉(zhuǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JavaScript中this的用法實(shí)例分析
這篇文章主要介紹了JavaScript中this的用法,結(jié)合實(shí)例形式分析了this的功能、常見(jiàn)用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
js 輸入框正則表達(dá)式(菜鳥(niǎo)必看教程)
下面小編就為大家?guī)?lái)一篇js輸入框使用正則表達(dá)式校驗(yàn)輸入內(nèi)容的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
JavaScript中的迭代器和可迭代對(duì)象與生成器
這篇文章主要介紹了JavaScript中的迭代器和可迭代對(duì)象與生成器，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09
基于JavaScript實(shí)現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)
本文給大家介紹javascript實(shí)現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)的相關(guān)知識(shí)，本文實(shí)用性非常高，代碼簡(jiǎn)單易懂，需要的朋友參考下吧
2016-01-01
JavaScript 面向?qū)ο笈c原型
這篇文章主要介紹了JavaScript 面向?qū)ο笈c原型,需要的朋友可以參考下
2015-04-04
JS判斷當(dāng)前是否平板安卓并是否支持cordova方法的示例代碼
這篇文章主要介紹了JS判斷當(dāng)前是否平板安卓并是否支持cordova方法,pc和安卓平板共用一套代碼,平板的代碼用了cordova做了一個(gè)殼子嵌套如果用了cordova就不支持elementUI中的上傳功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08