首頁 > php教程 > PHP开发 > html中滑鼠滾輪事件onmousewheel的處理方法

html中滑鼠滾輪事件onmousewheel的處理方法

高洛峰
發布: 2016-12-07 10:44:32
原創
1423 人瀏覽過

滾輪事件是不同瀏覽器會有一點點區別,一個像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法綁定DomMouseScroll事件,其他的瀏覽器滾輪事件使用mousewheel,下面我來給大家具體介紹。

Firefox使用DOMMouseScroll,其他的瀏覽器使用mousewheel。滾動事件觸發時Firefox使用detail屬性捕捉滾輪訊息,其他的瀏覽器使用wheelDelta。不知道為何在該問題上其他廠商和微軟的如此一致。 Firefox可以使用addEventListener方法來綁定DomMouseScroll事件。

elem.addEventListener(‘DOMMouseScroll', func, false);IE和其他的主流瀏覽器可以使用傳統的事件綁定模型。但不要使用IE專有的attachEvent方法,其他主流瀏覽器並不辨識微軟的這個方法。

Firefox 老鼠滾輪向上滾動是-3,向下滾動是3

IE 老鼠滾輪向上滾動是120,向下滾動是-120

Safari 滑鼠滾輪向上滾動是360,向下滾動是-360

Opera 滑鼠滾輪向上滾動是120,向下滾動是-120

Chrome 滑鼠滾輪向上滾動是120,向下滾動是-120

有人在Safari下做了一些測試:”只是滾動一圈的話,值為+-0.1,如果滾動地稍微快一點的話(多滾動幾圈),這個值也會變大。瀏覽器卻滾動30像素」。同時他也對Camino(基於Gecko的核心引擎)進行研究:「與Safari相似(+- 0.3 to +-Infinity),雖然使用了與firefox相同的核心引擎,但結果這個delta值卻只在+-2.666666裡浮動,無論滾動速度如何

其中經我測試,IE/Opera屬於同一類型,使用attachEvent即可添加滾輪事件。

 Safari與Chrome屬於相同類型,可使用HTML DOM方式新增事件

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

其中除Firefox因此新增事件使用以下方法

r​​rreee

   

detail與wheelDelta

判斷滾輪向上或向下在瀏覽器中也要考慮相容性,現在五大瀏覽器(IE、Opera、 Safari、Firefox、Come)中也要考慮相容性,現在五大瀏覽器(IE、Opera、 Safari、Firefox、Come)中也要考慮相容性Firefox 使用detail,其餘四類使用wheelDelta;兩者只在取值上不一致,代表意義一致,detail與wheelDelta只各取兩個值,detail只取±​​3,wheelDelta只取±120,其中正數表示為往上,負數表示向下。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板