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