事件深入应用三

最新推荐文章于 2024-06-26 17:39:49 发布

Mr Gong

最新推荐文章于 2024-06-26 17:39:49 发布

阅读量319

点赞数 1

分类专栏： DOM

本文链接：https://blog.csdn.net/GYZ_Code/article/details/77149500

版权

DOM 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

鼠标滚轮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滚轮</title>
    <style type="text/css">

        div{width: 200px;height: 200px;background: #f00;}


    </style>
</head>
<script>

window.onload=function (){

    var oDiv=document.getElementsByTagName('div')[0];

    /*
        鼠标滚轮事件

        IE、chrome   onmousewheel

                     event.wheelDalta 数字类型的返回值

                     向上：120
                     向下：-120


            ff       DOMMouseScroll  只能通过事件监听添加


                     event.detail    数字类型的返回值

                     向上：-3
                     向下： 3  


        return false阻止的是第一种绑定方式（ obj.on事件名称=fn  ）所触发的默认行为

        addEventListener绑定的事件需要通过event下面的preventDefault()来阻止默认行为

    */

    oDiv.onmousewheel=fn;

    if (oDiv.addEventListener){

        oDiv.addEventListener('DOMMouseScroll',fn, false);
    }


    function fn(ev) {

        var ev = ev || event;

        // alert( ev.wheelDelta );

        // alert(ev.detail)

        //对鼠标滚轮上下值的兼容性处理
        var b = true;

        if (ev.wheelDelta) {
            b = ev.wheelDelta > 0 ? true : false;
        } else {
            b = ev.detail < 0 ? true : false;
        }

        if(b){

            oDiv.style.height=oDiv.offsetHeight+10+'px';
        }else{

            oDiv.style.height=oDiv.offsetHeight-10+'px';
        }

        //阻止默认行为
        if (ev.preventDefault){


            ev.preventDefault();
        }

         return false;

    }
};
</script>
<body style="height:2000px">

    <div></div>

</body>
</html>

Mr Gong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件深入应用三

鼠标滚轮事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标滚轮</title> <style type="text/css"> div{width: 200px;height: 200px;background: #f00;} </style></head
复制链接

扫一扫

专栏目录