mousewheel與DOMMouseScroll

最近在研究設計grid的時候，再再一次地遇到這個小問題。

----很多自己開發和編寫過grid的時候會考慮自己渲染橫向和縱向的scroller，然後給其綁定事件，這個就會遇到一個相容性api的差異

1. mousewheel與DOMMouseScroll

這個應該有點經驗的fe會知道這個api的差異。當然可能經驗多一點點的人會看到以前的部分js的lib庫在判斷ff浏覽器的時候用document.getBoxObjectFor這個特性去做（http://zhangyaochun.iteye.com/blog/1187180）這裡附上昨天的記錄。其實記錄的本意是想告誡自己和所有同學雖然部分特性可能在你的browser.js的庫裡面很有效（代碼量很完美），但是一旦浏覽器版本更新，這樣的特性是否還存在？所有還是建議規規矩矩的（navigator.userAgent）

2.上代碼

//主要的是區分ff和其他浏覽器去綁定事件
//思想來源于tangram和prototype

/*
*isGecko -- judge the browser is Gecko*
*@function*
*@return {Boolean}*
*you can also like prototype.js*
navigator.userAgent.indexOf('Gecko')>-1 && navigator.userAgent.indexOf('KHTML') == -1
*/
ZYC.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent);

      

//有了相容性判斷後下面就是對應綁定事件了
//1.自己定義一個wheel事件
function wheel(event){
         //先暫時不放出來
}

if(!ZYC.browser.isGecko){
   //綁mousewheel
}else{
  //ff去綁DOMMouseScroll
}      

3、 到目前位置還沒用完全完成，雖然我們多知道，而且能判斷目前浏覽器，然後綁定事件了，那問題就來了

• 第一：我滑鼠滾軸向前向後咋區分？
• 第二：裡面是不是還有相容性的問題？

我先放出上面 wheel事件裡面的代碼吧  

//出現的event的屬性後面會詳細說明
function wheel(event){
      //獲得滾軸的向前向後
    var num = event.detail? (- event.detail /3) : (event.wheelDelta /120);

}      

其實從代碼的角度我們大緻可以看到：

• 有detail和wheelDelta的差別
• 還有機關制3還是120
• 為什麼event.detail前面還有-（負号）
• 正負代表向前向後？

下面詳細說一下：   1. mousewheel事件有event.wheelDelta    ----------如果傳回的是正的值就說明向上（前）滾動了，反之如果負值就向下（後）。    ---------傳回的值多是120的倍數，是以 傳回的值/120   2. DeltaDOMMouseScroll事件有event.detail    ----------如果是負值說明向上（前）滾動了，反之如果是正值就向下（後）。 -------（這點和上面相反）    ---------傳回的值多是3的倍數，是以  傳回值/3