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 {width: 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>
