zoukankan      html  css  js  c++  java
  • js中的鼠标滚轮事件

    ##  事件对象 event
        1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)
                window.onclick = function(ev){
                    var oEvent = ev || event;//event为IE8和IE8以下浏览器浏览器事件对象可以直接使用;
                    //以上代码可以判断是否传递了事件对象参数,如果传递了则使用传递的事件对象ev,否则使用window.event
                    alert(oEvent.type);//click类型
                }
        2 事件对象的兼容写法
            a.IE8和IE8以下浏览器不能传递参数,只能使用window.event对象。
            b.谷歌浏览器既可以传递事件对象参数,也可以使用window.envent对象,十分全面。
            c.火狐浏览器只能使用传递的事件对象参数。
            因此针对不同浏览器,兼容性写法如下:
                事件.事件类型 = function(ev){//事件类型如鼠标点击事件
                    var oEvent = ev || event;
                }
                
    
    ## 鼠标滚轮事件
        1 非火狐: mousewheel
            这里,event.wheelDelta < 0向下滚动
        2 火狐:DOMMouseScroll
            这里,event.detail > 0 为向下滚动,event.detail < 0 为向上滚动
        3.浏览器兼容性写法如下:
            document.onmousewheel = wheelHander;//非火狐
            document.addEventListener('DOMMouseScroll',wheelHander,false);//火狐
            
            function wheelHander(e){
                //事件的兼容性写法 
                oEvent = e || window.event;
                if(oEvent.wheelDelta){//非火狐
                    if(oEvent.wheelDelta > 0){//向上滚动
                        
                    }else{//向下滚动
                        
                    }
                }else if(oEvent.detail){
                    if(oEvent.detail > 0){//向下滚动
                        
                    }else{//向上滚动
                        
                    }
                }
            }
                
        3 案例:使用滚轮改变图片的大小
            
            var img = document.getElementsByTagName('img')[0];
            
            //非火狐实现滚轮效果
            document.onmousewheel = wheelHander;//非火狐
            //火狐一家使用DOMMouseScroll实现滚轮效果
            document.addEventListener('DOMMouseScroll',wheelHander,false);
            
            function wheelHander(e){
                oEvent = e || window.event;
                if(oEvent.wheelDelta){//非火狐
                    if(oEvent.wheelDelta > 0){//向上滚动
                        img.height++;
                    }else{//向下滚动
                        img.height--;
                    }
                }else if(oEvent.detail){
                    if(oEvent.detail > 0){//向下滚动
                        img.height--;
                    }else{//向上滚动
                        img.height++;
                    }
                }
            }
            

    获取更多前端知识,请关注下方二维码 ↓↓↓↓↓↓

     

  • 相关阅读:
    即使年龄小,我也是你的领导
    当老外骂你时,你就这样...
    纵横职场宝典
    22岁女老总欲筹办创业联盟
    让你的发言语出惊人
    爱因斯坦难题,98%的人答不出这道题!
    小本创业的11个步骤
    未来十大热门挣钱职业
    常用英语对话
    折腾是检验人才的唯一标准
  • 原文地址:https://www.cnblogs.com/menglong1214/p/9595009.html
Copyright © 2011-2022 走看看