快捷導(dǎo)航

javascript監(jiān)聽鼠標(biāo)滾輪事件淺析

更新時(shí)間：2014年06月05日 10:26:56 投稿：junjie

這篇文章主要介紹了javascript監(jiān)聽鼠標(biāo)滾輪事件淺析,使用具體例子說明,同時(shí)考慮了不同的瀏覽器,需要的朋友可以參考下

我們都見到過這些效果，用鼠標(biāo)滾輪實(shí)現(xiàn)某個(gè)表單內(nèi)的數(shù)字增加減少操作，或者滾輪控制某個(gè)按鈕的左右，上下滾動(dòng)。這些都是通過js對(duì)鼠標(biāo)滾輪的事件監(jiān)聽來實(shí)現(xiàn)的。今天這里介紹的是一點(diǎn)簡(jiǎn)單的js對(duì)于鼠標(biāo)滾輪事件的監(jiān)聽。

不同瀏覽器不同的事件

首先，不同的瀏覽器有不同的滾輪事件。主要是有兩種，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），關(guān)于這兩個(gè)事件這里不做詳述，想要了解的朋友請(qǐng)移步：鼠標(biāo)滾輪(mousewheel)和DOMMouseScroll事件。
另外在操作的過程中需要添加事件監(jiān)聽，代碼如下：兼容firefox采用addEventListener監(jiān)聽

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

/*注冊(cè)事件*/

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只各取兩個(gè) 值，detail只取±3，wheelDelta只取±120，其中正數(shù)表示為向上，負(fù)數(shù)表示向下。
具體的代碼如下所示:

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

<label for="wheelDelta">滾動(dòng)值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>

<label for="detail">滾動(dòng)值:(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; 

    } 

} 

/*注冊(cè)事件*/ 

if(document.addEventListener){ 

    document.addEventListener('DOMMouseScroll',scrollFunc,false); 

}//W3C 

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 

</script>

通過運(yùn)行上述代碼我們可以看到：

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

在非firefox瀏覽器中，滾輪向上滾動(dòng)返回的數(shù)值是120，向下滾動(dòng)返回-120

而在firefox瀏覽器中，滾輪向上滾動(dòng)返回的數(shù)值是-3，向下滾動(dòng)返回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

您可能感興趣的文章: