鼠标滚动事件封装

摘要

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

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

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

以oDiv为例

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

注:

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: