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

最新推荐文章于 2019-11-01 22:53:13 发布

dayanwu2842

最新推荐文章于 2019-11-01 22:53:13 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/stephenykk/archive/2013/06/06/3123066.html

版权

<!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>

转载于:https://www.cnblogs.com/stephenykk/archive/2013/06/06/3123066.html

dayanwu2842

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滑轮事件的差异onmousewheel和DOMMouseScroll

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>鼠标滑轮事件 onmousewheel, DOMMouseScroll</title> <style> body{width:100%...
复制链接

扫一扫