vue中引入mousewheel事件及兼容性處理方式

更新時間：2022年03月08日 10:19:50 作者：張三少

這篇文章主要介紹了vue中引入mousewheel事件及兼容性處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

引入mousewheel事件及兼容性處理

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

滾動條設(shè)置的要點(diǎn)在于

1、滾動條與滾動槽的高度比例應(yīng)該等于內(nèi)容區(qū)（動態(tài)變化）和可視區(qū)的高度比例；滾動槽與可視區(qū)平齊，高度一樣；滾動條的高度則根據(jù)內(nèi)容的高度等比例計算；

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

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

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

? ? 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");
? ? ? ? //設(shè)置比例
? ? ? ? let scale = ?this.wrapDiv.clientHeight / ?this.contentDiv.clientHeight;
? ? ? ? if (scale < 1) {
? ? ? ? ? this.mouseFlag = true;
? ? ? ? ? let h1 = ?this.sliderWrap.clientHeight * scale;
? ? ? ? ? h1 = (h1 < 50) ? 50 : h1;
? ? ? ? ? this.slider.style.height = h1 + "px";/*滾動條高度動態(tài)變化*/
? ? ? ? ? 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{/*當(dāng)內(nèi)容區(qū)高度小于等于可視區(qū)時，去除綁定的事件和滾動條*/
? ? ? ? ? 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';
? ? ? ? }
? ? ? },

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

通過上述方式即可很好地實(shí)現(xiàn)鼠標(biāo)滾動事件的效果，并不會有兼容性的問題出現(xiàn)。

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

關(guān)于scroll和mousewheel事件的問題

需要注意的點(diǎn)

火狐的鼠標(biāo)滾輪事件是DOMMouseScroll

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

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

實(shí)驗開始

在下面驗證例子的基礎(chǔ)上實(shí)驗，實(shí)驗之間代碼沒有干涉：

1.原樣輸出

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

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

e.stopPropagation();

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

到這里就出現(xiàn)一個問題：element的mousewheel事件在默認(rèn)處理里對這一情形進(jìn)行了處理嗎？

3.在element的mousewheel事件處理里取消默認(rèn)處理

e.preventDefault();

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

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

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

這個時候在元素內(nèi)滾動鼠標(biāo)，你會發(fā)現(xiàn)即使?jié)L動到頂部或底部，元素外的頁面并不會滾動，且并沒有輸出'd'，也就是document的scroll事件沒有觸發(fā)。不好的一點(diǎn)是你在滾動到底部或頂部時，繼續(xù)滾動鼠標(biāo)的話，元素內(nèi)還是會滾動，只不過是先下再上（或先上再下）地波動一下。

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

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

這個時候在元素內(nèi)滾動鼠標(biāo)，你會發(fā)現(xiàn)即使?jié)L動到頂部或底部，元素外的頁面跟著滾動，且輸出'd'，也就是document的scroll事件觸發(fā)了。

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

6.在實(shí)驗5的基礎(chǔ)上，將滾動的距離調(diào)整到很大

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

認(rèn)真觀察輸出的'b'的個數(shù)，和實(shí)驗1的對比，你會發(fā)現(xiàn)這次只有1個'b'，而且還輸出了'd'，而且'd'的數(shù)量還不少。經(jīng)過一些其他的實(shí)驗，得到：默認(rèn)事件處理里的判斷大概如下：

(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');
? ? ? ? });

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

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

例子如下：

? ? ? ?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');
? ? ? ? });

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: