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


    鼠标滚轮事件绑定及滚轮方向兼容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>
  • 相关阅读:
    #ifdef的用法
    修改WordPress中上传附件2M大小限制的方法/php+iis上传附件默认大小修改方法
    没有找到libufun.lib,因此这个应用程序未能启动。重新安装应用程序可能会修复此问题。
    JAVA安卓和C# 3DES加密解密的兼容性问题
    使用 Repeater 控件,每隔N条数据输出另外的格式
    Forms表单登陆,动态获取web.config里面的cookies配置
    SQL Server中索引使用及维护
    动态绑定easyui datagrid列名
    Spring Hibernate多数据源配置
    SSH异常处理
  • 原文地址:https://www.cnblogs.com/zhanghua-zh/p/10330373.html
Copyright © 2020-2023  润新知