JavaScript滚轮事件兼容性写法

   <p>研究滚轮事件是因为在做一个翻版的fullpage.js，需要通过监听滚轮事件进行翻页。在实现过程中遇到了一些兼容性问题处理。所以顺便封装了个方法wheel(upFn, downFn)，方便日后调用。</p>    <p>但W3C并没有对鼠标滚轮事件进行规范，各浏览器厂商封装了不同的实现方法，事件属性也不一样，号称最标准的FireFox，用了一个私有实现DOMMouseScroll。不过，其他浏览器都是用onmousewheel实现，所以做兼容处理的难度也不大。</p>    <table>     <thead>      <tr>       <th>浏览器</th>       <th>实现方法</th>       <th>事件属性</th>       <th>向上滚动</th>       <th>向下滚动</th>      </tr>     </thead>     <tbody>      <tr>       <td>FireFox</td>       <td>DOMMouseScroll</td>       <td>detail</td>       <td>-3的倍数</td>       <td>3的倍数</td>      </tr>      <tr>       <td>非FireFox</td>       <td>onmousewheel</td>       <td>wheelDelta</td>       <td>120的倍数</td>       <td>-120的倍数</td>      </tr>     </tbody>    </table>    <p>在FireFox下，DOMMouseScroll必须通过addEventListener来绑定，如：<br> element.addEventListener("DOMMouseScroll",func,false) ；</p>    <p>在非FireFox下，就没有限制了，除了addEventListener方法，还可用下边的代码：<br> element.onmousewheel=function(){}；</p>    <p>封装代码如下：</p>    <pre>  <code class="language-javascript">// 滚轮响应事件  // 参数：type有两个属性值，分别为"up"（滚轮向上）和"down"（滚轮向下）  function wheel(upFn, downFn) {      // IE6      window.onmousewheel = getWheelDalta;      // Firefox      if(window.addEventListener) {          window.addEventListener("DOMMouseScroll", getWheelDalta, false);      }      // 获得鼠标滚轮事件      function getWheelDalta(event) {          var event = event || window.event;          var delta = 0;          // delta的返回值为正时，表示向前滚动；delta的返回值为负时，表示向后滚动；          if (event.wheelDelta) {              // IE中，鼠标滚轮信息存放在wheelDelta属性中；向前滚动时，wheelDelta的值是120的倍数；向后滚动时，wheelDelta的值是-120的倍数；              delta = event.wheelDelta/120;               if (window.opera) delta = -delta;          } else if (event.detail) {              // Firefox的鼠标滚轮信息存放在detail属性中；向前滚动，detail的值是-3的倍数；向后滚动，detail的值是3的倍数；              delta = -event.detail/3;          }          // 执行滚轮事件函数          if(delta > 0) {              upFn();          }else {              downFn();          }            // 阻止默认行为，防止当页面本身就存在滚动条时出现的异常          prevent(event);          function prevent(evt){              if(evt.preventDefault){                  evt.preventDefault();              }else{                  evt.returnValue = false;              }          }      }     }  </code></pre>    <p>测试调用：</p>    <pre>  <code class="language-javascript">function wheelUp() {      alert("wheelUp");  }  function wheelDown() {      alert("wheelDown");  }  wheel(wheelUp, wheelDown);  </code></pre>    <p>来自：http://www.dengzhr.com/js/440  </p>