• 鼠标滚轮事件---兼容


    鼠标滚轮事件绑定及滚轮方向兼容demo

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                #test{
                     200px;
                    height: 200px;
                    background: pink;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
                
            </style>
        </head>
        <body>
            <div id="test"></div>
        </body>
        <script type="text/javascript">
            
            window.onload=function(){
                var testNode = document.querySelector("#test");

                // 事件绑定:火狐
                if(testNode.addEventListener){
                    testNode.addEventListener("DOMMouseScroll",fn);
                }

                // 事件绑定:非火狐浏览器
                testNode.onmousewheel=fn;
                
                // 滚轮方向
                function fn(ev){
                    ev=ev||event;
                    var dir="";
                    if(ev.wheelDelta){
                        dir = ev.wheelDelta>0?"up":"down";// 非火狐浏览器
                    }
                    if(ev.detail){
                        dir = ev.detail<0?"up":"down"; // 火狐
                    }
                    
                    console.log(dir)
                }
                
            }
            
            
        </script>
    </html>
  • 相关阅读:
    [读书笔记]SQLSERVER企业级平台管理实践读书笔记02
    [工作相关] 一个虚拟机上面的SAP4HANA的简单使用维护
    vCenter机器查找功能不可用的解决
    [日常工作]GS使用安装盘修改密码后的处理
    [读书笔记]SQLSERVER企业级平台管理实践读书笔记01
    [书摘]架构真经--可扩展性规则的利益与优先级排行榜
    2017年总结2018年规划
    Windows 通过命令行设置固定ip地址
    ACDsee的安装过程
    [工作相关] GS产品使用LInux下Oracle数据库以及ASM存储时的数据文件路径写法.
  • 原文地址:https://www.cnblogs.com/zhanghua-zh/p/10330373.html
Copyright © 2020-2023  润新知