<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body style="height: 2000px;"> <style type="text/css"> #div1{width:100px;height:100px;background: red;} </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); /* ie/chrome : onmousewheel event.wheelDelta //firefox 下没有这个属性 上 ： 120 下 ：-120 firefox : DOMMouseScroll 必须用addEventListener addEventListener 必须是标准浏览器才支持 （ie6 7 8 用的是attachEvent） event.detail 上：-3 下：3 return false 阻止的是 obj.on事件名称=fn 所触发的默认行为 addEventListener绑定的事件需要通过event下面的preventDefault(); */ oDiv.onmousewheel = fn; if(oDiv.addEventListener){ oDiv.addEventListener('DOMMouseScroll', fn ,false); } function fn(ev){ //alert() var ev = ev || event; //alert(ev.wheelDelta); //alert(ev.detail) var b = true; if(ev.wheelDelta){ b = ev.wheelDelta > 0 ? true : false }else{ b = ev.detail < 0 ? true : false } //alert(b) if(b){ this.style.height = this.offsetHeight - 10+'px'; }else{ this.style.height = this.offsetHeight + 10+'px'; } if(ev.preventDefault){ ev.preventDefault(); } return false; } } </script> <script type="text/javascript"> //return false 阻止的是 obj.on事件名称=fn 所触发的默认行为 // addEventListener绑定的事件需要通过event下面的preventDefault(); //阻止默认行为是根据事件的绑定决定的 //右键行为阻止 var context1 = function(){ document.oncontextmenu = function (){// chrome return false; } } //context1() //标准浏览器 var context2 = function (){ document.addEventListener('contextmenu',function(ev){ ev.preventDefault(); //return false; }) } //context2() var context3 = function(){ document.attachEvent('contextmenu',function(){ return false; }) } context3() //IE非标准 </script> <div id="div1"></div> </body> </html>