• JS基础(鼠标滚轮事件)


    onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,

    但是火狐不支持该属性

    在火狐中需要使用DOMMouseScroll来绑定滚动事件

    注意该事件需要通过addEventListener()函数来绑定

    判断鼠标滚轮滚动的方向

    event.wheelDelta可以获取鼠标滚轮滚动的方向

    向上滚正值

    向下滚负值

    wheelDelta这个值我们不看大小,只看正负

    wheelDelta火狐不支持

    在火狐中使用event.detail来获取滚动的方向

    向上滚是负值

    向下滚是正值

    使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false

    需要使用event来取消默认行为

    event.preventDefault();

    但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错

            <style>
                #box1{
                     100px;
                    height: 100px;
                    background-color: #FF0000;
                }
            </style>
            <script type="text/javascript">
                window.onload=function(){
                    var box1=document.getElementById('box1');
                    //正常浏览器通过onmousewheel来绑定鼠标滚轮滚动的事件(除火狐)
                    box1.onmousewheel=function(event){
                        // alert("滚了")
                        event=event||window.event;
                        //event.wheelDelta是兼容一般浏览器(不兼容火狐)    向上是正值,向下是负值
                        //event.detail兼容火狐    向上是负值,向下是正值
                        if(event.wheelDelta>0 ||event.detail<0 )
                        {
                            box1.style.height=box1.clientHeight-10+'px';
                        }
                        else{
                            box1.style.height=box1.clientHeight+10+'px';
                        }
                        //取消默认事件,避免浏览器有滚动条时触发浏览器滚动条
                        //event.preventDefault不兼容IE8及以下所以判断
                        event.preventDefault&&event.preventDefault();
                        //不能用的情况下用return false来取消默认事件
                        return false;
                    }
                    //在火狐中需要使用DOMMouseScroll来绑定滚动事件
                    box1.addEventListener("DOMMouseScroll",box1.onmousewheel);
                }
            </script>
        </head>
        <body>
            <div id="box1"></div>
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
            <br /><br /><br /><br />
        </body>
  • 相关阅读:
    ES6 Set.Map.Symbol数据结构
    ES6 class类 静态方法及类的继承
    ES6 浅谈Reflect
    ES6 proxy代理详解及用法
    Vue之生命周期函数
    Vue之自定义键盘修饰符、自定义指令
    v-show和v-if区别
    迭代器iterator
    es6之Proxy代理
    es6之symbol数据类型
  • 原文地址:https://www.cnblogs.com/MDZZZ/p/12497542.html
Copyright © 2020-2023  润新知