鼠标滑轮事件的差异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>

 

你可能感兴趣的:(mousewheel)