首页 > 代码库 > 鼠标滚轮事件介绍
鼠标滚轮事件介绍
简介
IE6实现了鼠标滚轮事件mousewheel，这个事件包含了一个鼠标事件所没有的属性，wheelDelta，这
个属性值始终是120的倍数，而且向上滑动一单位，wheelDelta值为120，向下为-120.随后Chrome，Opera，
Safari等也都实现了该事件。Opera10之前的版本对wheelDelta值的符号处理错误，需要修改。但是Firefox没
有该事件，而是用DOMMouseScroll。这个事件只有Firefox支持，所以可以单独针对Firefox做兼容。
另外，HTML5为了兼容这两个事件，另外规定了一个标准版本wheel事件，比较新的浏览器基本实现了该事件。
chrome31+，Firefox 17+，IE9+，Safari 7.0.5以及新版使用webkit内核的Opera，使用Carakan内核的Opera
并不支持该事件。wheel事件有deltaX、deltaY和deltaZ属性，默认为100.
综上，目前wheel事件的兼容性其实并不理想，mousewheel的兼容性最佳，适用于除Firefox外的所有浏览器，对于
Firefox则单独做兼容处理。
1 addEvent = function(type,callback,useCapture){ 2 if(window.addEventListener){ 3 this.addEventListener(type,callback,!!useCapture); 4 }else if(window.attachEvent){ 5 this.attachEvent(‘on‘+type,callback); 6 } 7 return callback; 8 } 9 wheel = function(el,callback){10 var type = ‘mousewheel‘;11 try{12 document.createEvent(‘MouseScrollEvents‘);13 type = ‘DOMMouseScroll‘;14 }catch(e){}15 el.addEvent = addEvent;16 el.addEvent(type,function(e){17 e = e || window.event;18 var wheelDelta,delta;19 if(‘wheelDelta‘ in e){20 wheelDelta = e.wheelDelta; // 正数向上滚动21 if(window.opera && window.opera.version() < 10){22 e.delta = parseInt(-wheelDelta) / 120; // safari 下的wheeldelta为浮点数23 }24 e.delta = parseInt(wheelDelta) / 120;25 }else if(‘detail‘ in e){26 e.wheelDelta = -e.detail * 40; //修复firefox下没有wheelDelta的bug，detail为+-327 e.delta = e.wheelDelta / 120;28 }29 callback.call(el,e);30 //阻止向上冒泡31 e.stopPropagation && e.stopPropagation();32 if("stopBubble" in e) e.stopBubble = true;33 return false;34 },false);35 };
鼠标滚轮事件介绍
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。