滑鼠滾輪放大頁面字型事件Mousewheel

來源:互聯網
上載者:User

文章簡介:當需要製作轉動滑鼠滾輪放大頁面字型這樣的互動效果時,會用到 Mousewheel 事件。

當需要製作轉動滑鼠滾輪放大頁面字型這樣的互動效果時,會用到 Mousewheel 事件。其實在大多數瀏覽器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 卻不支援此事件,不過慶幸 Firefox 3.5+ 中提供了另外一個等同的事件:”DOMMouseScroll” (事件和事件屬性的測試案例)。

OK,我們現在已經知道了不同瀏覽器之間實現的差別,相容代碼如下:

var addEvent = (function(){
        if (window.addEventListener) {
            return function(el, sType, fn, capture) {
                el.addEventListener(sType, fn, (capture));
            };
        } else if (window.attachEvent) {
            return function(el, sType, fn, capture) {
                el.attachEvent("on" + sType, fn);
            };
        } else {
            return function(){};
        }
    })(),
    // isFirefox 是虛擬碼,大家可以自行實現
    mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

// object 也是虛擬碼,你需要註冊 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
    event = window.event event;
    // todo something
}, false);

我們再回到要實現的互動效果上,現在還有其他一些問題需要來解決:

  1. 頁面字型到底是放大還是縮小呢? ==> 滑鼠滾輪是向上滾動還是向下滾動呢?
  2. 頁面字型縮放的倍數到底是多少呢? ==> 滑鼠滾輪滾動的幅度大小是多少呢?

還好,我們可以通過 event 的某些屬性值得到這些資訊:

  1. mousewheel” 事件中的 “event.wheelDelta” 屬性值:返回的值,如果是正值說明滾輪是向上滾動,如果是負值說明滾輪是向下滾動;返回的值,均為 120 的倍數,即:幅度大小 = 返回的值 / 120。
  2. DOMMouseScroll” 事件中的 “event.detail” 屬性值:返回的值,如果是負值說明滾輪是向上滾動(與 “event.wheelDelta” 正好相反),如果是正值說明滾輪是向下滾動;返回的值,均為 3 的倍數,即:幅度大小 = 返回的值 / 3。
  3. mousewheel” 事件在 Opera 10+ 中卻是個特例,既有 “event.wheelDelta” 屬性,也有 “event.detail” 屬性。

註:上面第三點,在《The onmousewheel event of JavaScript》一文中有這樣一段批註:

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE’s.

但經測試, Opera 9+Opera 10+ 中的 event.wheelDelta 屬性與其他瀏覽器中的表現完全一致,未發現異常與錯誤,從介面角度來說,代碼中應優先使用 “event.wheelDelta” 屬性。

此時代碼如下:

var addEvent = (function(){
        if (window.addEventListener) {
            return function(el, sType, fn, capture) {
                el.addEventListener(sType, fn, (capture));
            };
        } else if (window.attachEvent) {
            return function(el, sType, fn, capture) {
                el.attachEvent("on" + sType, fn);
            };
        } else {
            return function(){};
        }
    })(),
    stopEvent: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }

        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    zoomIn = function(){},
    zoomOut = function(){},
    // isFirefox 是虛擬碼,大家可以自行實現
    mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

// object 是虛擬碼,你需要註冊 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
    var delta = 0;
    event = window.event event;
    stopEvent(event);

    delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3);
    // zoomIn, zoomOut 是虛擬碼,需要實現的縮放事件
    delta > 0 ? zoomIn(delta): zoomOut(Math.abs(delta));
} , false);

事件和事件屬性的測試案例:http://www.planabc.net/demo/event/mousewheel.html

擴充閱讀:《Mouse wheel programming in JavaScript》



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。