zoukankan      html  css  js  c++  java
  • 鼠标滑轮事件的差异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>
  • 相关阅读:
    nginx负载均衡
    Zabbix的安装和使用
    JENKINS安装和使用
    docker-compose安装
    gitlab的安装和使用
    Surging填坑记
    SQL2008R2下数据库修复一例
    SQL2000下修复某数据库的经历
    《C++ Primer Plus 第6版》学习笔记
    C++常见笔试题
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3123066.html
Copyright © 2011-2022 走看看