JS鼠标滑轮事件的写法和按键的事件

在body注册一下滑轮事件

然后JS代码如下:

 function win_onload() {
            ////注册按键事件
            //document.onkeydown = keydown;

            /*注册事件*/
             if(document.addEventListener){
                     document.addEventListener('DOMMouseScroll',scrollFunc,false);
                 }//W3C
             window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
        }

        //滑轮事件，上=120，下=-120
        var scrollFunc=function(e){
               var direct=0;
                e=e || window.event;
                //上滑动
                if (e.wheelDelta == 120) {//IE/Opera/Chrome
                    //执行事件
                    selectProvNode();
                    return false;
                }
                //下滑动
                if (e.wheelDelta == -120) {//Firefox
                    //执行事件
                    selectNextNode();
                    return false;
                }
             }


        ////按键事件
        //function keydown() {
        //    //上
        //    if (event.keyCode == 188) {
        //        //执行事件
        //        selectProvNode();
        //        return false;
        //    }
        //    //下
        //    if (event.keyCode == 190) {
        //        //执行事件
        //        selectNextNode();
        //        return false;
        //    }
        //}

但是这样写会有一个缺点就是滑轮一次滑动力度过大会导致事件的多次执行，就算一次只按一格也会执行两次，问题在于

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari

这里window和document同时注册了事件然后执行了两次，避免这样的方法，可以加入全局变量判断，执行完一个JS事件后调用回调函数改变标记状态，然后就不会多次执行了，代码如下:

<div id="form1" class="bg">
        第一个
    </div>
    <div id="form2" class="bg2">
        第二个
    </div>
    <div id="form3" class="bg3">
        第三个
    </div>

    <script>
        $(document).ready(function () {
            var height = $(window).height();
            var width = $(window).width();
            var body;
            if (navigator.userAgent.indexOf("Firefox") > 0 || navigator.userAgent.indexOf("MSIE") > 0) {
                body = document.documentElement;
            } else {
                body = document.body;
            }
            var isFinish = true;
            var i = 1;
            var scrollFunc = function (e) {
                if (isFinish) {
                    var scrollTop = body.scrollTop;
                    e = e || window.event;
                    if (e.wheelDelta < 0) {
                        scrollDown(i);
                    } else {
                        scrollUp(i);
                    }
                }

            };
            var scrollDown = function (height) {
                isFinish = false;//判断标记，避免多次执行
                $('#form' + i + '').animate({ height: '0px'}, 'slow', function () {
                    $('#form' + i + '').css('display', 'none');
                    var temp = i + 1 > 3 ? 1 : i + 1;
                    $('#form' + temp + '').animate({ height: '100%'}, 'slow');
                    $('#form' + temp + '').css('display', 'block');
                    console.log(" wheelDelta:" + height);
                    i = temp;
                    isFinish = true;//判断标记，避免多次执行
                });
            };

            var scrollUp = function (height) {
                isFinish = false;//判断标记，避免多次执行
                $('#form' + i + '').animate({ height: '0px' }, 'slow', function () {
                    $('#form' + i + '').css('display', 'none');
                    var temp = i - 1 < 1 ? 3 : i - 1;
                    $('#form' + temp + '').animate({ height: '100%'}, 'slow');
                    $('#form' + temp + '').css('display', 'block');
                    console.log(" wheelDelta:" + height);
                    i = temp;
                    isFinish = true;//判断标记，避免多次执行
                });
            };

            if (navigator.userAgent.indexOf("Firefox") > 0) {
                if (document.addEventListener) {
                    document.addEventListener('DOMMouseScroll', scrollFunc, false);
                }
            } else {
                document.onmousewheel = scrollFunc;
            }
        });
    </script>