滑鼠滾輪事件

2022-07-17 05:15:08 字數 864 閱讀 1416

需求:

通過滑鼠滾輪實現某個表單內的數字增加減少操作,或者滾輪控制某個按鈕的上下滾動後觸發不同的事件。

實現:通過js對滑鼠滾輪的事件進行監聽。

描述:首先,不同的瀏覽器有不同的滾輪事件。主要是有兩種,onmousewheel(firefox不支援)和dommousescroll(只有firefox支援),關於這兩個事件這裡不做詳述,想要了解的朋友請移步:滑鼠滾輪(mousewheel)和dommousescroll事件。

具體實現:1. 需要新增事件監聽,**如下:相容firefox採用addeventlistener監聽

/*監聽滑鼠滾動事件  

* 1.火狐的是:dommousescroll;

* 2.ie/opera/chrome:直接新增事件*/

if(document.addeventlistener)//w3c

window.onmousewheel=document.onmousewheel=scrollfunc;//ie/opera/chrome

var scrollfunc=function(e)else if(e.detail)  

}

注意:(簡要說明:

判斷滾輪向上或向下在瀏覽器中也要考慮相容性,現在五大瀏覽器(ie、opera、safari、firefox、chrome)中firefox 使用detail,其餘四類使用wheeldelta;兩者只在取值上不一致,代表含義一致,detail與wheeldelta只各取兩個 值,detail只取±3,wheeldelta只取±150,其中正數表示為向下,負數表示向上)這是我看的文章上的一句說明,但是我在測試的時候發現,ie和谷歌都顯示+-120,有時候谷歌還會顯示240。待考證。

滑鼠滾輪事件

新增事件 有相容性 註冊事件 if document.addeventlistener window.onmousewheel document.onmousewheel scrollfunc ie opera chrome detail與wheeldelta 判斷滾輪向上或向下在瀏覽器中也有相容性...

滑鼠滾輪事件

新增事件 有相容性 註冊事件 if document.addeventlistener window.onmousewheel document.onmousewheel scrollfunc ie opera chrome detail與wheeldelta 判斷滾輪向上或向下在瀏覽器中也有相容性...

滑鼠滾輪事件

滑鼠滾輪事件和鍵盤事件以及滑鼠左右鍵沒本質的區別。2 if document.addeventlistener window.onmousewheel document.onmousewheel scroll ie opera chrome safari 像上面這樣就可以給整個文件繫結滾輪事件。fu...