javascript監(jiān)聽鼠標(biāo)滾輪事件淺析
我們都見到過這些效果，用鼠標(biāo)滾輪實(shí)現(xiàn)某個表單內(nèi)的數(shù)字增加減少操作，或者滾輪控制某個按鈕的左右，上下滾動。這些都是通過js對鼠標(biāo)滾輪的事件監(jiān)聽來實(shí)現(xiàn)的。今天這里介紹的是一點(diǎn)簡單的js對于鼠標(biāo)滾輪事件的監(jiān)聽。
不同瀏覽器不同的事件
首先，不同的瀏覽器有不同的滾輪事件。主要是有兩種，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），關(guān)于這兩個事件這里不做詳述，想要了解的朋友請移步：鼠標(biāo)滾輪(mousewheel)和DOMMouseScroll事件。
另外在操作的過程中需要添加事件監(jiān)聽，代碼如下：兼容firefox采用addEventListener監(jiān)聽
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
js返回?cái)?shù)值判斷滾輪上下
判斷滾輪向上或向下在瀏覽器中也要考慮兼容性，現(xiàn)在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個 值，detail只取±3，wheelDelta只取±120，其中正數(shù)表示為向上，負(fù)數(shù)表示向下。
具體的代碼如下所示:
<label for="wheelDelta">滾動值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滾動值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
var scrollFunc=function(e){
e=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
}
/*注冊事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>
通過運(yùn)行上述代碼我們可以看到：
在非firefox瀏覽器中，滾輪向上滾動返回的數(shù)值是120，向下滾動返回-120
而在firefox瀏覽器中，滾輪向上滾動返回的數(shù)值是-3，向下滾動返回3
代碼部分如下，e.wheelDelta是判斷是否為非firefox瀏覽器，e.detail為firefox瀏覽器
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
PS：這里再為大家推薦一款關(guān)于JS事件的在線查詢工具，歸納總結(jié)了JS常用的事件類型與函數(shù)功能：
javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event
- JS鼠標(biāo)事件大全 推薦收藏
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- js 鼠標(biāo)點(diǎn)擊事件及其它捕獲
- js改變鼠標(biāo)的形狀和樣式的方法
- javascript 鼠標(biāo)事件總結(jié)
- js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動切換-點(diǎn)擊左右按鈕切換特效代碼
- js中鼠標(biāo)滾輪事件詳解(firefox多瀏覽器)
- js判斷鼠標(biāo)位置是否在某個div中的方法
- JS實(shí)現(xiàn)超級好看的鼠標(biāo)小尾巴特效
相關(guān)文章
用JS操作FRAME中的IFRAME及其內(nèi)容的實(shí)現(xiàn)代碼
一直都需要這樣的東西，發(fā)現(xiàn)了這個好東西，一定要研究下2008-07-07
這篇文章主要介紹了JavaScript Array對象基本方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了layui框架中l(wèi)ayer父子頁面交互的方法,結(jié)合實(shí)例形式分析了layer父子頁面交互的常用技巧以及l(fā)ayer彈出多個iframe找到父頁面的操作方法,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了微信小程序如何調(diào)用圖片接口API并居中顯示,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-06-06
JavaScript實(shí)現(xiàn)氣球打字的小游戲
這篇文章主要介紹了JavaScript實(shí)現(xiàn)氣球打字的小游戲，下面文章的思路來源于打字游戲，具體實(shí)現(xiàn)過程,需要的朋友可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-04-04
禁止頁面刷新讓F5快捷鍵及右鍵都無效，下面有個不不錯的實(shí)現(xiàn)方法，大家可以感受下2014-01-01
Js自動截取字符串長度,添加省略號(……)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫s自動截取字符串長度,添加省略號(……)的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
下面小編就為大家?guī)硪黄斎敕ǖ幕剀嚺c消息發(fā)送快捷鍵回車的沖突解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
深入理解Javascript動態(tài)方法調(diào)用與參數(shù)修改的問題
這篇文章主要是對Javascript動態(tài)方法調(diào)用與參數(shù)修改的問題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12