当前访客身份:游客 [ 登录 | 加入开源中国 ]

代码分享

当前位置:
代码分享 » JavaScript  » Web编程
姑娘

火狐下鼠标滚轮事件

姑娘 发布于 2016年08月18日 10时, 0评/886阅
分享到: 
收藏 +0
0
鼠标滚轮事件在火狐下的兼容问题
标签: <无>

代码片段(1) [全屏查看所有代码]

1. [代码][JavaScript]代码     跳至 [1] [全屏预览]

    //兼容火狐的鼠标滚轮事件
    document.getElementById("t1").addEventListener("DOMMouseScroll",function(e){
        scrollFunc(e,$(".table_1"),$("#pageNum"),$("#total"));
    },false);

     document.getElementById("t2").addEventListener("DOMMouseScroll",function(e){
        scrollFunc(e,$(".table_2"),$("#pageNum_phone"),$("#total_phone"));
    },false);

    document.getElementById("t3").addEventListener("DOMMouseScroll",function(e){
        scrollFunc(e,$(".table_3"),$("#pageNum_bus"),$("#total_bus"));
    },false);


    //chroom和ie下的鼠标滚轮事件
    $('.table_1 table').on("mousewheel", function() {
        scrollFunc(e,$(this),$("#pageNum"),$("#total"));
    });

    $('.table_2 table').on("mousewheel",function(){
        scrollFunc(e,$(this),$("#pageNum_phone"),$("#total_phone"));
    })

    $('.table_3 table').on("mousewheel",function(){
        scrollFunc(e,$(this),$("#pageNum_bus"),$("#total_bus"));
    })
}


function scrollFunc(e,that,pageNum,totalPage){
     var e = e || window.event;
     if (e.wheelDelta) {      
        if (e.wheelDelta > 0) {
           up(that,pageNum,totalPage);//chroom和ie下,鼠标滚轮向上滚
        }
        if (e.wheelDelta < 0) { 
           down(that,pageNum,totalPage);//chroom和ie下,鼠标滚轮向下滚
       }
    } 
    else if (e.detail) {  
        if (e.detail> 0) { 
            down(that,pageNum,totalPage);//火狐下,鼠标滚轮向下滚(与chroom和ie方向相反)
        }
        if (e.detail< 0) { 
            up(that,pageNum,totalPage);//火狐,鼠标滚轮向上滚(与chroom和ie方向相反)
        }
    }
}


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

开源从代码分享开始 分享代码
姑娘的其它代码 全部(12)...