vue中引入mousewheel事件及兼容性處理方式的示例分析

小編給大家分享一下vue中引入mousewheel事件及兼容性處理方式的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

引入mousewheel事件及兼容性處理

項目實現過程中需要對一個已經有縱向滾動條的table表格增加鼠標滾輪（mousewheel）事件，方便查看數據；其實現原理與我上一篇博客中的拖動事件類似，利用模擬出來的同一個滾動條來實現

滾動條設置的要點在于

1、滾動條與滾動槽的高度比例 應該等于 內容區（動態變化）和可視區的高度比例；滾動槽與可視區平齊，高度一樣；滾動條的高度則根據內容的高度等比例計算；

2、各元素的定位采用絕對定位，其父元素采用相對定位，這樣就能很好地設置樣式；

布局與樣式做好后，只需要在組件methods注冊方法，在元素就位后調用該方法，在方法內部為表格綁定（mousewheel）事件；在這里需要考慮兼容性問題，firefox并不支持mousewheel事件，它對應的鼠標滾動事件為DOMMouseScroll事件，并且該事件僅能通過DOM2級（addEventListener）添加處理程序；并且判斷鼠標滾動方向的方式也不一樣，firefoxt通過detail屬性判斷，向前滾動該屬性為-3，向后+3；其余瀏覽器通過wheelDelta屬性，向前時為+120的倍數，向后為-120的倍數；

具體內容可參考《js高級程序設計》事件一章；添加函數如下：

    scroll(){
        this.wrapDiv = document.getElementById("wrap");
        this.contentDiv = document.getElementById("context-table");
        this.contentDiv1 = document.getElementById("context-table1");
        this.sliderWrap = document.getElementById("sliderWrap");
        this.slider = document.getElementById("slider");
        //設置比例
        let scale =  this.wrapDiv.clientHeight /  this.contentDiv.clientHeight;
        if (scale < 1) {
          this.mouseFlag = true;
          let h2 =  this.sliderWrap.clientHeight * scale;
          h2 = (h2 < 50) ? 50 : h2;
          this.slider.style.height = h2 + "px";/*滾動條高度動態變化*/
          let y = 0;
          let that = this;
          //為firefox添加滾輪事件
          if (document.addEventListener){
            document.addEventListener('DOMMouseScroll',function (e) {
                if(that.mouseFlag){
                  //console.log('scroll');
                  let event1 = window.event|| e;
                  y = (event1.detail > 0) ? y + 8 : y - 8;
                  y = (y < 0) ? 0 : y;
                  let max = that.sliderWrap.clientHeight - that.slider.clientHeight;
                  y = (y > max + 1) ? max + 1 : y;
                  that.slider.style.top = y + "px";
                  scale = that.wrapDiv.clientHeight / that.contentDiv.clientHeight;
                  let y1 = -y / scale;
                  that.contentDiv.style.top = y1 + "px";
                  that.contentDiv1.style.top = y1 + "px";
                }
            },false)
          }
          this.wrapDiv.onmousewheel = function (e) {
            if (scale < 1) {
              let event1 = window.event || e;
              y = (event1.wheelDelta < 0) ? y + 8 : y - 8;
              y = (y < 0) ? 0 : y;/*限定滾動范圍*/
              let max =  that.sliderWrap.clientHeight -  that.slider.clientHeight;
              //console.log(scale, y, sliderWrap.clientHeight, slider.clientHeight);
              y = (y > max + 1) ? max + 1 : y;
              that.slider.style.top = y + "px";
              scale =  that.wrapDiv.clientHeight /  that.contentDiv.clientHeight;
              let y1 = -y / scale;
              that.contentDiv.style.top = y1 + "px";
              that.contentDiv1.style.top = y1 + "px";
            }
          }
        }
        else{/*當內容區高度小于等于可視區時，去除綁定的事件和滾動條*/
          this.wrapDiv.onmousewheel =null;
          if(document.addEventListener){
             this.mouseFlag = false;
          }
          this.sliderWrap.style.visibility = 'hidden';
          let height = this.contentDiv.clientHeight;
          tableRight.style.height  = height+72+'px';
          this.wrapDiv.style.height = height+2+'px';
        }
      },

該函數在給firefox綁定的事件解綁時遇到了問題，由于removeEventListener()需要通過句柄來解綁，而addEventListener()通過句柄添加處理函數會導致event參數無法傳遞的問題；即使在需要解綁時給document綁定空的處理函數也無法覆蓋前一個綁定函數；最后只好添加一個標志，在需要解綁函數時改變標志的值；在綁定函數中通過判斷該標志的值來確定是否要做操作；

通過上述方式即可很好地實現鼠標滾動事件的效果，并不會有兼容性的問題出現。

注：若僅僅是為表格綁定單一的滾動事件，則可以不顯示滾動條，甚至不設置滾動條；滾動條的作用僅僅是用來指示內容區滾動的位置，以及配合拖動事件使用； 

關于scroll和mousewheel事件的問題

需要注意的點

火狐的鼠標滾輪事件是DOMMouseScroll

事件參數兼容：e=window.event||e;(下面省略)

preventDefault()函數取消的是默認事件，不會把我們自己添加的事件處理刪除

實驗開始

在下面驗證例子的基礎上實驗，實驗之間代碼沒有干涉：

1.原樣輸出

在元素內無論是手動拉動滾動條還是滾動鼠標滾輪，'d'都是無法出現的。而當元素滾動到達頂部或底部的時候，輸出的是就有'd'了，但是這個時候并沒有輸出'b'，說明scroll事件本來就沒有發生冒泡。而document的scroll事件是由于其他因素觸發的。

2.在element的mousewheel事件處理里把冒泡取消

e.stopPropagation();

這時候在元素內滾動鼠標滾輪，'c'始終是無法出現的，說明我們阻止mousewheel事件的冒泡成功了。但是在滾動條到達底部或頂部時，雖然'c'依舊沒有出現，但是'd'卻出現了，說明這個時候的document的scroll事件是靠element的mousewheel來觸發的。

到這里就出現一個問題：element的mousewheel事件在默認處理里對這一情形進行了處理嗎？

3.在element的mousewheel事件處理里取消默認處理

e.preventDefault();

這時候在元素內滾動鼠標，只會有'a'、'c'會出現，頁面也不會滾動。說明鼠標滾輪滾動element頁面的效果是由element的mousewheel默認事件處理來的。這個時候留意實驗1中滾輪滾動一下'b'的輸出數量，大概就能猜到默認處理的過程。

4.在element的mousewheel里添加一個自己的頁面滾動（與默認處理的滾動方向相反）

element.scrollTop+=e.wheelDelta>0?30:-30;//手動添加的頁面滾動

這個時候在元素內滾動鼠標，你會發現即使滾動到頂部或底部，元素外的頁面并不會滾動，且并沒有輸出'd'，也就是document的scroll事件沒有觸發。不好的一點是你在滾動到底部或頂部時，繼續滾動鼠標的話，元素內還是會滾動，只不過是先下再上（或先上再下）地波動一下。

5.在element的mousewheel里添加一個自己的頁面滾動（與默認處理的滾動方向相同）

element.scrollTop+=e.wheelDelta<0?30:-30;//手動添加的頁面滾動

這個時候在元素內滾動鼠標，你會發現即使滾動到頂部或底部，元素外的頁面跟著滾動，且輸出'd'，也就是document的scroll事件觸發了。

這里需要注意到一點：元素的scrollTop屬性是無法無限增加和減少的，到了滾動的頂部或底部后只能反向變化（可以自行輸出測試）。

6.在實驗5的基礎上，將滾動的距離調整到很大

element.scrollTop+=e.wheelDelta<0?300:-300;（值要大等于滾動行程）

認真觀察輸出的'b'的個數，和實驗1的對比，你會發現這次只有1個'b'，而且還輸出了'd'，而且'd'的數量還不少。經過一些其他的實驗，得到：默認事件處理里的判斷大概如下：

(function scroll(element){
    for(var i=0;i<12;i++){
        var temp=element.scrollTop;
        element.scrollTop+=e.wheelDelta<0?10:-10; //滾動算法肯定不是這個，這里只是簡單演示
        if(temp!= element.scrollTop){
            //滾動‘消息樹'的下一個元素（和冒泡是一個列表）
            var newEle=....//消息樹怎么獲取我不懂
            scroll(newEle);
            return;
        }
    }
})();

驗證例子：

       addEventListener(element,'mousewheel',function(e){
            console.log('a');
        });
        addEventListener(element,'scroll',function(e){
            console.log('b');
        });
        addEventListener(document.documentElement,'mousewheel',function(e){
            console.log('c');
        });
        addEventListener(document,'scroll',function(e){
            console.log('d');
        });

結論：通過上面的6個實驗，很容易發現在元素的mousewheel的默認處理事件里對scrollTop屬性進行變化和判斷，如果沒有發生變化就對外部元素進行滾動一下（具體滾動算法不懂，滾動距離和鼠標滾一下是一樣的），以此類推，如果下一個元素到邊界了，就再下一個。而這個過程和冒泡是沒有關系的，只是當前元素的mousewheel默認事件處理進行的。

應用：因此為了實現元素滾動到底時繼續滾動卻不會使外部元素滾動，我們可以直接取消它的默認處理，然后給一個自己的滾動函數就可以了。至于怎么滾就看自己給什么函數了，而冒泡取不取消也看自己，上面的默認處理在冒泡和捕獲階段是不進行的。

例子如下：

       addEventListener(element,'mousewheel',function(e){
            console.log('a');
            e.preventDefault();
            // e.stopPropagation();
            ulObj.scrollTop+=e.wheelDelta<0?20:-20;
        });
        addEventListener(element,'scroll',function(e){
            console.log('b');
        });
        addEventListener(document.documentElement,'mousewheel',function(e){
            console.log('c');
        });
        addEventListener(document,'scroll',function(e){
            console.log('d');
        });

看完了這篇文章，相信你對“vue中引入mousewheel事件及兼容性處理方式的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！