[JS] - onmusewheel事件(相容IE,FF)

​

相信使用者在浏覽Google Map 時，都注意到向上或向下滾動滑鼠可以使地圖放大或縮小。其實，對于滑鼠滾動我們并不陌生。但要給一個元素綁定滑鼠滾動事件，我們有必要對該事件有一個詳盡的了解。

浏覽器對該事件支援情況如何？IE6, Opera9+, Safari2+以及Firefox1+均支援“onmousewheel”事件，在FF 3.x中，與之相當的是“DOMMouseScroll”事件。“onmousewheel”作為事件名，不為其識别。是以，為了保證能在每個浏覽器中都能運作，就需要針對不同的浏覽器來綁定不同的事件。

  varmousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel"//FF doesn't recognize mousewheel as of FF3.x

if(document.attachEvent) //if IE (and Opera depending on user setting)

document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')})

elseif(document.addEventListener) //WC3 browsers

document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false) 

上面的代碼給document綁定了mousewheel事件，并能在所有浏覽器中運作。但是，滑鼠每向上或向下移動一次，滾動了多少？當該事件觸發時，在non-FF浏覽器中，記錄其距離的是“wheelDelta”，它傳回的總是120的倍數（120表明mouse向上滾動，－120表明滑鼠向下滾動）。在FF中，記錄其滾動距離的是“detail”屬性，它傳回的是3的倍數（3表明mouse向下滾動，－3表明mouse向上滾動）。

需要注意的是，Opera 響應“onmousewheel”事件時，它同時擁有“wheelDelta”和“detail”屬性。其“detail”屬性傳回的值與FF中相同。是以，對Opera 應該用“detail”屬性來mouse滾動的距離。在觸發滾動事件時，我希望得到整數1或－1。通過上面的分析，我們可以很輕松的得到我們想要的值，對于“wheelDelta”，隻需要除以120，對于“detail”,将其除以3即可。

functiondisplayDelta(e){

varevt =window.event ||e;

vardelta =evt.detail ?-evt.detail /3: evt.wheelDelta /120;

returndelta ;

}

有了上面的分析，我們可以建構自己的函數為一個對象綁定mousewheel事件。即：

functionwheel(obj, fn ,useCapture){

varmousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel"//FF doesn't recognize mousewheel as of FF3.x

if(obj.attachEvent) //if IE (and Opera depending on user setting)

obj.attachEvent("on"+mousewheelevt, handler, useCapture);

elseif(obj.addEventListener) //WC3 browsers

obj.addEventListener(mousewheelevt, handler, useCapture);

functionhandler(event) {

vardelta =0;

varevent =window.event ||event ;

vardelta =event.detail ?-event.detail/3 : event.wheelDelta/120;

if(event.preventDefault)

event.preventDefault();

event.returnValue =false;

returnfn.apply(obj, [event, delta]);