【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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 事件。  

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





沒有留言: