Javascript和jquery事件--鼠标滚轮事件WheelEvent

<1>js事件

滚轮事件在js中，不同浏览器还是有不同的，介于我只测试谷歌和火狐浏览器的情况，其他浏览器有待自行探索。有三种写法：

1. target.onmousewheel = wheel; 谷歌浏览器支持，火狐浏览器不支持，网上说的是除火狐浏览器外都支持。
2. target.addEventListener(‘wheel’,wheel);谷歌浏览器支持，火狐浏览器现在也支持了，网上说的是除火狐浏览器外都支持。
3. target.addEventListener(‘DOMMouseScroll’,wheel)只有火狐浏览器支持。

　　在以上三种方法中，target.addEventListener(‘wheel’,function(){});是最通用的，3大概不怎么用了，如果需要兼容低版本的火狐浏览器你可以加上判断。火狐浏览器同时支持whell和DOMMouseScroll监听器，不支持onmousewheel，但是如果你为元素设置这两个监听器，它会触发两次。你如果同时为谷歌浏览器设置whell和onmousewheel，onmousewheel会失效，但是你为wheel绑定两个监听器是有效的。

 　　在js中，除了设置监听器外，我们还需要了解到鼠标滚轮的方向，需要关注两个值：event.wheelDelta(正负120)(除了火狐),大多以负数向下，event.detail(正负3)(火狐浏览器特有)，以正数为向下，下面是网上的一个通用判断函数。

//统一处理滚轮滚动事件
        function wheel(event){
            console.log(event);
            var delta = 0;
            if (!event) event = window.event;
            if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
                delta = event.wheelDelta/120; 
                if (window.opera) delta = -delta;//opera取反处理
            } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
                delta = -event.detail/3;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
            }
            
            if (delta)
                handle(delta);
        }

        //上下滚动时的具体处理函数
        function handle(delta) {
            if (delta <0){//向下滚动
                console.log('向下滚动');
            }else{//向上滚动
                console.log('向上滚动');
            }
        }

<1>jq事件，相似，下面是一个兼容代码，引自https://www.cnblogs.com/xiangsj/p/6446109.html

         

  $('#contain2').on("mousewheel DOMMouseScroll", function (e) {

                        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie

          (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox

if (delta > 0) {

                    console.log("wheelup");

           } else if (delta < 0) {

                    console.log("wheeldown");

}

参考：               

Js

https://www.cnblogs.com/caoruiy/p/4694498.html

https://www.cnblogs.com/ysx215/p/7002338.html

https://blog.csdn.net/lijunlinlijunlin/article/details/40711437

jq

https://www.cnblogs.com/xiangsj/p/6446109.html