vue app左右滑動頁面內有拖動事件互相幹擾怎麽辦

DOM事件在Vue中為DOM元素綁定事件的具體方法在文章中的方法與事件處理器章節，通過v-on指令或事件語法糖@為DOM元素綁定事件。Vue解析組件模板後，在綁定更新v-on指令時會為DOM元素綁定事件(當然如果元素為iframe，會等到iframe加載完成後再為其綁定事件)。Vue中為DOM元素綁定事件是采用DOM2級事件的處理方式，因為Vue服務的是IE9以上的現代瀏覽器，他們也都是支持DOM2級事件。因此下例中實際上相當於el.addEventListener('click',func)所以addEventListener支持綁定的事件，v-on指令也都支持。同樣的理論上也可以解綁事件，雖然也有相應的api，但是Vue文檔中並沒有顯示地告訴我們怎麽做。在代碼中可以看到，每個v-on指令都有壹個reset方法，reset方法是當指令所綁定方法發生改變時，重新綁定事件之前的解綁操作，我們可以利用這個api來解綁事件。因此如果需要解綁事件，我們可以遍歷vm._directives找到相應該指令，進行解綁。當然既然是采用DOM2級事件處理，也可以使用removeEventListener直接進行解綁，看這個demo。執行解綁操作後btn1的確解綁成功了，但btn2沒有解綁成功，這要說到v-on指令的修飾符，見源碼中對帶有修飾符的handler的處理。顧名思義，修飾符修飾過的handler做了的事情，Vue的處理是包裝原handler新的handler用於向DOM元素綁定，而解綁時仍然解綁原方法當然會失敗。當然這只是分析Vue的事件綁定原理，大多數情況下我們並不需要去解綁事件。合理的利用事件委托可以解決大部分由事件綁定引起的性能問題。自定義事件Vue自定義事件是為組件間通信設計，自定義事件提供了$on、$off、$once、$emit、$broadcast、$dispatch幾個api，非常簡潔。首先提兩個vm的私有變量，vm._events和vm._eventCount。每個vm實例所有的自定義事件都將存儲在vm._events，而vm._eventsCount存儲的是執行事件廣播後子組件觸發自定義事件處理程序的數量，這是為了事件廣播優化而來的，如果vm._eventsCount[event]數量為零，當事件廣播時則可斷定子組件沒有該事件的監聽器，就沒必要向子組件層層捕獲該事件監聽器了。$on註冊壹個自定義事件，註冊事件很簡單，首先將其掛載到該實例下vm._events[event]=fn然後是向上傳播，更新各個組件的_eventsCount。這裏需要註意，我們可以通過$on為生命周期註冊鉤子，點擊查看demo，但是生命周期不可冒泡和廣播，所以需要更新eventsCount前需要過濾。查看modifyListenerCount$once因為$once註冊的事件是壹次性的，執行完後卸載，所以其實$once調用$on來註冊事件的函數是包裝過的。$off理解了註冊事件的流程(其實就是更改_events和_eventsCount)那麽卸載事件也就很清晰了。但是$off支持三種卸載方式1、如果沒有參數，則刪除所有的事件監聽器遍歷_events，冒泡更新每個事件的_eventsCount，清空vm._events2、如果只提供了事件，則刪除這個事件所有的監聽器冒泡更新每個事件的_eventsCount，vm._events中剔除該事件3、如果同時提供了事件與回調，則只刪除這個回調遍歷vm._events[event]的事件處理方法，如果該事件處理方法和回調相同，則從vm._events[event]剔除該事件處理方法，並冒泡更新該事件的_eventsCount$emit觸發事件，直接遍歷vm._events[event]的每個事件處理程序並執行。$emit返回shouldPropagate，shouldPropagate是壹個布爾值，取決於父鏈上的是否存在該事件的監聽器以及，事件處理程序返回的值。他決定$dispatch是否停止冒泡。dispatch派發事件。首先在實例上觸發該事件，默認情況下將會停止冒泡傳播，但如果$emit返回的shouldPropagate為true，則該事件會繼續沿父鏈向上傳播，即在父組件繼續向上派發事件。broadcast事件廣播。深度優先遍歷子組件，並執行各個子組件的監聽器事件處理程序，在綁定和卸載自定義事件時會會每個組件維護壹個vm._eventsCount，而它的作用正是在深度遍歷的時候給予提示，避免不必要的深度遍歷。通過自定義事件在組件之間的傳播，我們可以利用它進行組件通信。組件通信在應用開發過程中是壹個棘手的問題，因為它直接關系到整個應用的健壯和可維護程度，在開發大型項目中建議引入vuex，從應用架構的角度來考慮組件通信相比這種事件形式更容易維護，比如多個子組件都有派發事件與父組件進行通信，如果子組件派發事件不註意命名規範，出現命名重復情況，那麽父組件監聽器根本不知道這個事件是從哪裏派發過來的以技如何處理，這是隱患之壹。如果采用這種方式進行組件通信，那麽必將導致子組件大量派發事件，那麽父組件將要維護大量的事件監聽器，如果時間久了，很容易忘記監聽器和派發事件子組件的對應關系，這又增加了開發與維護成本。充斥著事件派發的組件維護成本也是壹個容易留坑的地方。此外通過事件可以進行父子組件的通信，但兄弟組件的通信有需要增加不少開發成本。組件的自定義事件在上文分析DOM元素綁定事件中，我們用到這個例子但是有時候會出現v-on為組件綁定事件的情況，如上文中沒有分析到，留在這裏說，這裏有兩個明顯區別是組件而不是DOM元素自定義事件而不是DOM事件因此顯然addEventLisntener不適用，而且Vue執行的也是和第壹個例子完全不同的處理方式，對其的處理在registerComponentEvents。它其實是為組件註冊自定義事件。這裏v-on指令綁定的結果是demoVm._ahref="/appdz/"title="成都app制作開發公司events[myfunc]=[func]以及更新_eventsCount。查看這個demo。可見v-on指令既可為DOM元素綁定事件也可為組件綁定自定義事件。明白了這個，這個issuse的原因也就很明了了。