簡介
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為+-3 27 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 };