1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 { 100px; height: 100px; background: red;} 8 </style> 9 <script> 10 /* 11 鼠标滚轮事件 12 */ 13 window.onload = function() { 14 15 var oDiv = document.getElementById('div1'); 16 17 /* 18 ie/chrome : onmousewheel 19 event.wheelDelta 20 上：120 21 下：-120 22 23 firefox : DOMMouseScroll 必须用addEventListener 24 event.detail 25 上：-3 26 下：3 27 28 return false阻止的是 obj.on事件名称=fn 所触发的默认行为 29 addEventListener绑定的事件需要通过event下面的preventDefault(); 30 */ 31 oDiv.onmousewheel = fn; 32 33 if (oDiv.addEventListener) { 34 oDiv.addEventListener('DOMMouseScroll', fn, false); 35 } 36 37 //alert(2); 38 39 function fn(ev) { 40 //alert(1); 41 42 var ev = ev || event; 43 44 //alert( ev.wheelDelta ); 45 46 //alert(ev.detail) 47 48 //兼容的鼠标滚动处理 true 为 向上滚动 false 为向下滚动 49 50 var b = true; 51 52 if (ev.wheelDelta) { 53 b = ev.wheelDelta > 0 ? true : false; 54 } else { 55 b = ev.detail < 0 ? true : false; 56 } 57 58 //alert(b); 59 //控制一个div的高度 60 if ( b ) { 61 this.style.height = this.offsetHeight - 10 + 'px'; 62 } else { 63 this.style.height = this.offsetHeight + 10 + 'px'; 64 } 65 66 if (ev.preventDefault) { 67 ev.preventDefault(); //火狐下阻止默认事件 ， 因为其事件是通过第二种方式绑定，所以 retufn false 无效。 68 } 69 70 return false; //阻止默认事件 71 72 } 73 74 /*document.oncontextmenu = function() { 75 return false; 76 }*/ 77 78 //给火狐绑定鼠标滚轮事件 79 document.attachEvent('oncontextmenu', function() { 80 return false; 81 }); 82 83 /*document.addEventListener('contextmenu', function(ev) { 84 85 ev.preventDefault(); 86 //return false; 87 });*/ 88 89 } 90 </script> 91 </head> 92 93 <body style="height: 2000px;"> 94 <div id="div1"></div> 95 </body> 96 </html>