HTML5 滑鼠滾輪事件-mousewheel

目前各主要瀏覽器針對滑鼠的滾輪操作均提供了相關的偵測支援,只要監聽mousewheel事件即可,例如:

slide.addEventListener(mousewheel,function (e) { 
        //回應滾輪操作 }, 
    false);

相關的設定於HTML5 支援滑鼠滾輪事件這篇文章裏面作了初步的說明,但以上的技巧並不適用 Firefox ,其支援的滾輪事件名稱為DOMMouseScroll,如果要讓 Firefox 支援滾輪操作必須將監聽的程式碼調整如下:

slide.addEventListener(DOMMouseScroll,function (e) {
        //回應滾輪操作 },
    false);

至於滾輪的方向,則由事件參數引用wheelDelta 屬性來取得,如果是 120 表示使用者往前捲動滾輪,如果是 -120 表示往後捲動,如果是Firefox 則必須引用detail屬性,如果是往前滾動則回傳-3,否則回傳值則是 3 。

綜合以上的特性,我們可以撰寫以下的程式碼讓包含Firefox 在內的幾個主流瀏覽器支援滑鼠滾輪操作。

var mousewheel = (/Firefox/i.test(navigator.userAgent)) ?
"DOMMouseScroll" : "mousewheel";

slide.addEventListener(mousewheel,
        function (e) {
            if (e.wheelDelta > 0 || e.detail < 0) {
                //滑輪往前
            } else {
                //滑輪往後
            }
        }, false);

其中的 slide 為監聽滾輪事件的元素,mousewheel 根據目前的瀏覽器種類決定為 DOMMouseScroll 或是 mousewheel 事件。  

文章右邊為示範滾輪操作範例,將滑鼠游標移至矩形框範圍內,滾動滑鼠示測試效果。





沒有留言: