【Js】鼠标滚轮事件

原文地址：http://www.joy-studio.com/frontend-develop/cross-browser-mousewheel-and-demo.html

做东西用到：加上自己的理解o(∩_∩)o 哈哈。

浏览器差异：firefox滚轮事件是DOMMouseScroll，其他浏览器使用的是mousewheel

firefox事件的event对象使用detail值表示滚轮反向，（-3）表示向上，（3）表示向下。

其他浏览器使用wheelDelta值表示表示滚轮方向，（120）表示向上， （-120）表示向下。

监听事件，删除监听事件：IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener。

fixedEvent：判断滚轮方向

fixedFn：滚动滚轮取消滚轮的默认滚动网页行为

el.wheelHash：把fixedFn存放到对象的wheelHash属性

1 var mousewheel = (function(){
2     var types =['DOMMouseScroll','mousewheel'];
3
4     fixedEvent = function(e){
5         e.wheel = (e.wheelDelta? e.wheelDelta : -e.detail) > 0? 1 : -1;// 通过事件判断鼠标滚轮反向，1是向上，-1是向下
6         e.wheelDir = e.wheel > 0? 'up' : 'down';    //这个只是描述 e.wheel的值和滚轮方向的关系
7         return e;
8     };
9
10     return{//返回mousewheel的方法
11         on: function(el, fn, preventDefault){ //mousewheel对象的on方法， el触发mousewheel事件对象，fn触发后执行函数，preventDefault是否阻止默认行为：滚轮的网页滚动效果
12             if(typeof preventDefault != 'boolean'){ //如果传入的实参preventDefault不是布尔值
13                 preventDefault = true; //初始化为true
14             }
15
16             var fixedFn = function(e){ //阻止默认行为函数
17                 e = fixedEvent(e || window.event); // 兼容写法， 返回的e用来判断滚轮方向
18                 if(preventDefault){ // 如果需要阻止默认行为
19                     if(e.preventDefault){    //firefox
20                         e.preventDefault();
21                     }
22                     else{
23                         e.returnValue = false; //ie
24                     }
25                 };
26
27                 fn.call(el, e); //el事件对象调用fn函数，参数为e; 注意fn中使用e.wheel去判断鼠标滚轮事件
28             },
29             wheelHash = el.wheelHash; //把包含fixedFn函数的 el.wheelHash属性 赋值给 wheelHash
30
31             if(!wheelHash){  //判断函数是否存在 wheelHash 对象
32                 wheelHsah = {};
33                 wheelHash[fn] = fixedFn;  //wheelHash对象的属性fn为阻止默认行为函数
34                 el.wheelHash = wheelHash;  //把wheelHash对象赋值给el的wheelHash属性  wheelHash[fn] == el.wheelHash[fn]
35             }else{
36                 if(wheelHash[fn]) return; //如果存在 wheelHash 且 wheelHash中有 fixedFn 那么返回
37                 wheelHash[fn] = fixedFn;  //如果没有， 就把fixedFn赋值给wheelHash.fn
38             };
39
40             if(document.addEventListener){  //firefox
41                 var i = types.length;
42                 while(i--){  //循环滚轮事件 数组
43                     el.addEventListener(types[i], fixedFn, false);    //firefox el监听滚轮事件，执行取消默认行为
44                 }
45             }
46             else{  //ie
47                 el.attachEvent('onmousewheel', fixedFn);     // ie 监听事件， 处理函数fixedFn
48             }
49         },
50     //mousewheel中的on方法作用: 让元素监听事件，且处理是否执行默认行为。并且保存事件的阻止默认行为函数fixedFn到对象el.wheelHash属性中，
51
52         un: function(el, fn){
53             if(!el.wheelHash) return;  //如果对象不存在wheelHash, 直接跳出(没效果了)；
54             var wheelHash = el.wheelHash;
55             if(document.removeEventListener){  //firefox
56                 var i = types.length;
57                 while(i--){
58                     el.removeEventListener(types[i],wheelHsah[fn], false);  //删除监听事件，执行取消默认行为
59                 }
60             }else{ //ie
61                 el.detachEvent('onmousewheel', wheelHash[fn]);
62             }
63                 delete wheelHash[fn]; //删除 默认行为函数
64         },
65     }
66 })();
67
68
69 //定义滚轮事件
70 // var myWheel = function(e){
71     // console.log(e.wheelDir);
72 // }
73 //添加滚轮事件
74 // mouseWheel.on(element, myWheel);
75 //删除滚轮事件
76 // mouseWheel.un(element, myWheel);