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