zoukankan html css js c++ java

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>

查看全文

相关阅读:
需求分析-配置软件开发的出发点
 有关tab页的
 有关菜单的
 有关树形结构的
 需求分析-新闻发布的完整需求
 需求分析-网盘类的需求分析
 需求分析-有关有关富文本编辑器的需求
 Objective-C中的instancetype和id区别
 webservice远程调试开启
 Controller之间传递数据：Block传值

原文地址：https://www.cnblogs.com/llcdbk/p/4902370.html