鼠标滚动 

 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>

 

posted @ 2015-04-27 12:26  晚秋ing  阅读(192)  评论(0)    收藏  举报