<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标滑轮事件 onmousewheel, DOMMouseScroll</title> <style> body{width:100%; height:400px; background:#eee;} h2{font-weight:normal;} </style> </head> <body> <h2 id='rtn'>0</h2> <script> function $(id){return document.getElementById(id);} // firefox不能通过 dom.eventtype=fn 这样的方式定义 鼠标滑轮事件 if(document.addEventListener) document.addEventListener('DOMMouseScroll', function(e){$('rtn').innerHTML=parseInt($('rtn').innerHTML,10)+e.detail/3+''; }, false); document.onmousewheel=function(e){ e=e||window.event; $('rtn').innerHTML=parseInt($('rtn').innerHTML,10) +e.wheelDelta/120+''; }; // firefox通过 addEventListener('DOMMouseScroll', fn, false) 这样的方式添加 鼠标滑轮事件 // ie chrome safari opera等浏览器 通过 html dom事件方式添加 dom.event=fn //滑轮方向 判断 firefox , event.detail 取值 向上 -3 ，向下 3 // 滑轮方向判断 ie chrome opera safari 取值 向上 120，向下 -120 </script> </body> </html>