码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标滚轮事件的监听

时间:2014-04-27 21:28:13      阅读:502      评论:0      收藏:0      [点我收藏+]

标签:blog   class   com   code   div   java   style   javascript   string   tab   type   

鼠标滚轮事件的监听
原理:判断鼠标滚轮的滚动获取一个值,根据这个值判断滚动的方向。
分析:
首先,判断滚轮方向。
Firefox:detail,取值为-/+3(负值向上,正值向下);
其他:wheelDelta,取值为+/-120(正值向上,负值向下)。
兼容所有浏览器的的封装:

1
2
3
4
5
6
7
8
9
10
function scrollEvent(ev){
    ev = ev || window.event;
    var data = ‘‘;
    if(ev.wheelDelta){
        data = ev.wheelDelta;
    }else{
        data = -ev.detail*40;
    };
    alert(data)
}

函数返回+/-120(正值向上,负值向下)。

然后向对象添加事件。
Firefox:事件名为DOMMouseScroll
其他:事件名为mousewheel

1
2
3
4
5
6
7
8
9
10
11
function addEvent(element,type,handler){
    if(element.addEventListener){
        element.addEventListner(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent(‘on‘+type,handler);
    }else{
        element[‘on‘+type] = null;
    }
};
addEvent(document,‘mousewheel‘,scrollEvent);
addEvent(document,‘DOMMouseScroll‘,scrollEvent);

  

鼠标滚轮事件的监听,码迷,mamicode.com

鼠标滚轮事件的监听

标签:blog   class   com   code   div   java   style   javascript   string   tab   type   

原文地址:http://www.cnblogs.com/invincible-hehe/p/3695048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!