【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);