<!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>