鼠标滚动事件封装

摘要

浏览器的兼容性问题一直让开发人员头疼不已。不同于以往，这次的兼容性问题体现在火狐与其它浏览器的差别上。在PC端中，多数网站的交互重心都放在了鼠标事件上，因此鼠标滚动也是不可或缺的一员。为了开发的方便，我们往往通过函数封装来解决浏览器的兼容性问题，下面一起来看看滚动函数的封装。

浏览器的兼容性问题一直让开发人员头疼不已。不同于以往，这次的兼容性问题体现在火狐与其它浏览器的差别上。在PC端中，多数网站的交互重心都放在了鼠标事件上，因此鼠标滚动也是不可或缺的一员。为了开发的方便，我们往往通过函数封装来解决浏览器的兼容性问题，下面一起来看看滚动函数的封装。

  1. function mWheel(ev) {
  2.     var ev = ev || event;
  3.     var b;
  5.     // 滚动方向进行统一
  6.     if (ev.wheelDelta) {
  7.         // wheelDelta针对IE、Chrome(向上滚动为正，向下为负)
  8.         b = ev.wheelDelta > 0 ? true : false;
  9.     } else {
  10.         // detail针对Firefox(向上滚动为负，向下为正)
  11.         b = ev.detail < 0 ? true : false;
  12.     }
  14.     if (b) {
  15.         // 此处执行向上滚动要执行的函数
  16.     } else {
  17.         // 此处执行向下滚动要执行的函数
  18.     }
  20.     // 阻止通过addEventListener绑定所触发的默认行为
  21.     if (ev.preventDefault) {
  22.         ev.preventDefault();
  23.     }
  25.     // 阻止通过on绑定所触发的默认行为
  26.     return false;
  27. }

以oDiv为例

  1. oDiv.onmousewheel = mWheel;
  3. // 因为非标准下没有addEventListener，所以需要做判断
  4. if (oDiv.addEventListener) {
  5.     oDiv.addEventListener('DOMMouseScroll', mWheel, false);
  6. }

注：

1、IE、Chrome用onmousewheel绑定，Firefox用DOMMouseScroll，并且只能通过addEventListener('DOMMouseScroll', 函数, false)绑定

2、IE、Chrome中鼠标滚动监测使用ev.wheelDetal，Firefox中鼠标滚动监测使用ev.detail

3、return false用于阻止obj.on事件名称或非标下obj.attathEvent('on事件名称', 函数)所触发的默认行为

4、addEventListener绑定的事件触发的默认行为只能通过preventListener阻止

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: