鼠标滑轮事件的差异onmousewheel和DOMMouseScroll 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>鼠标滑轮事件 onmousewheel, DOMMouseScroll</title>
    <style>
    body{width:100%;  height:400px; background:#eee;}
    h2{font-weight:normal;}
    </style>
</head>
<body>
<h2 id='rtn'>0</h2>
<script>
    function $(id){return document.getElementById(id);}
    
    // firefox不能通过 dom.eventtype=fn 这样的方式定义 鼠标滑轮事件
        if(document.addEventListener) document.addEventListener('DOMMouseScroll', function(e){$('rtn').innerHTML=parseInt($('rtn').innerHTML,10)+e.detail/3+''; }, false);
    
    
        document.onmousewheel=function(e){
        e=e||window.event;
        $('rtn').innerHTML=parseInt($('rtn').innerHTML,10) +e.wheelDelta/120+'';
        };
    
    // firefox通过 addEventListener('DOMMouseScroll', fn, false) 这样的方式添加 鼠标滑轮事件
    // ie chrome safari opera等浏览器 通过 html dom事件方式添加  dom.event=fn

    //滑轮方向 判断  firefox , event.detail  取值 向上 -3 ，向下 3
    // 滑轮方向判断 ie chrome opera safari 取值 向上 120，向下 -120

</script>
</body>
</html>

 

posted @ 2013-06-06 23:54  stephenykk  阅读(409)  评论(0)  编辑  收藏  举报