javascript監(jiān)聽鼠標滾輪事件淺析
我們都見到過這些效果，用鼠標滾輪實現(xiàn)某個表單內(nèi)的數(shù)字增加減少操作，或者滾輪控制某個按鈕的左右，上下滾動。這些都是通過js對鼠標滾輪的事件監(jiān)聽來實現(xiàn)的。今天這里介紹的是一點簡單的js對于鼠標滾輪事件的監(jiān)聽。
不同瀏覽器不同的事件
首先，不同的瀏覽器有不同的滾輪事件。主要是有兩種，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），關于這兩個事件這里不做詳述，想要了解的朋友請移步：鼠標滾輪(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返回數(shù)值判斷滾輪上下
判斷滾輪向上或向下在瀏覽器中也要考慮兼容性，現(xiàn)在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個 值，detail只取±3，wheelDelta只取±120，其中正數(shù)表示為向上，負數(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>
通過運行上述代碼我們可以看到：
在非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：這里再為大家推薦一款關于JS事件的在線查詢工具，歸納總結了JS常用的事件類型與函數(shù)功能：
javascript事件與功能說明大全：
相關文章
cookie丟失問題(認證失效) Authentication （用戶驗證信息）也會丟失
window.showModalDialog() 后 window.open() 導致cookie丟失問題(認證失效) Authentication （用戶驗證信息）也會丟失2009-06-06
JS實現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集
這篇文章主要介紹了JS實現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集,以實例形式較為詳細的分析了JavaScript實現(xiàn)動態(tài)添加下拉菜單及響應鼠標事件生成菜單等實現(xiàn)技巧,需要的朋友可以參考下2015-09-09
使用 JavaScript 創(chuàng)建并下載文件(模擬點擊)
本文將介紹如何使用 JavaScript 創(chuàng)建文件，并自動/手動將文件下載，這在導出原始數(shù)據(jù)時會比較方便2019-10-10
這篇文章主要給大家介紹了關于JS操作字符串的一些常見內(nèi)置方法,JavaScript中有許多常用的數(shù)組和字符串操作函數(shù),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
《JavaScript DOM 編程藝術》讀書筆記之JavaScript 圖片庫
這篇文章主要介紹了《JavaScript DOM 編程藝術》讀書筆記之JavaScript 圖片庫,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了微信小程序-API接口安全詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
最近有個同事問了個問題，關于數(shù)組，對象和類數(shù)組的，仔細說起來都是基礎，其實都沒什么好講的，不過看到還是有很多朋友有些迷糊，決定還是寫出來吧，下面這篇文章主要給大家介紹了Javascript對數(shù)組對象的各種操作,需要的朋友可以參考借鑒。2017-01-01
這篇文章主要為大家詳細介紹了微信小程序自定義導航欄（模板化），文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JS實現(xiàn)消息來時讓網(wǎng)頁標題閃動效果的方法
這篇文章主要介紹了JS實現(xiàn)消息來時讓網(wǎng)頁標題閃動效果的方法,實例分析了JavaScript基于時間函數(shù)動態(tài)操作頁面元素的技巧,并附帶了開心網(wǎng)的標題閃動解決方案,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細 介紹了OpenLayer學習之自定義測量控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09