JS-鼠标滚轮事件 和 阻止默认行为 

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

 

posted @ 2015-12-01 15:26  asker_wind  阅读(3044)  评论(0)    收藏  举报