鼠标滚轮事件兼容处理-优快云博客

鼠标滚轮事件

<!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>