引言：做可視化地圖項目，使用vue-seamless-scroll實現表格數據自動滾動，有個bug就是復制出來的數據點擊事件失效。這個插件底層的實現是cope的形式，

無限滾動原理：無限滾動的原理就是把之前的遍歷的內容復制一份，滾動這兩部分內容，達到無縫滾動效果。(一般數據量比較多有這種效果，數據量比較少，我就不讓他滾動了)。

?

問題分析：

當第一個ul中的數據滾動完時（真實數據）,第二個ul 部分的click事件不起作用（復制出來的數據），無法實現一些點擊這行，彈窗詳情信息業務需要功能。?

我需要這些數據添加一些點擊事件，彈出二級頁面及區域切換效果。

解決辦法：

方式一：

采用事件委托的方式：

?事件委托又叫事件代理，就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

一般來說，DOM需要有事件處理程序，我們都會直接給它設定事件處理程序就好了，但是如果有很多DOM需要添加處理事件，比如，一個ul下有很多個li，需要給每個li都添加相同的點擊事件，這時候我們通常會用for循環的方法，遍歷所有元素，然后給他們添加點擊事件，雖然看似內心毫無波瀾很合理的做法，背后實則存在著巨大的性能弊端。

在JS中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能，因為需要不斷的與DOM節點進行交互，所以訪問DOM的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是為什么性能優化的主要思路就是從減少DOM操作的角度去入手的原因。

這種情況，如果用時間委托，就會將所有的操作都放到JS程序里面，與DOM的操作就只需要交互一次，這樣就能大大的減少與DOM的交互次數；并且，每一個函數都是一個對象，是對象就會占用內存，對象越多，內存占用率就越大，性能自然就會越差，如果使用事件委托，我們就可以只對它的父級這一個對象進行操作，這樣我們就值需要一個內存空間就夠了，大量節省了內存空間，提高整體頁面的性能了。

給外層div加點擊事件，通過event.target獲取到點擊的dom元素

?

?給點擊的列的元素綁定 屬性，這里我綁定了id和自定義屬性data-obj對象，直接把改列的item添加進去，不用一個一個單獨綁定。

點擊方法，把原來的點擊方法取消，直接在這個底部調用。、

寫了一個比較通用的方法其它幾個頁面按照這個方法也很好用，不用一個個綁定，那個類row純屬做了一個標志位，便于循環之后的判斷，如果不清楚，直接console.log,便于定位每個變量。

?大功告成。

總結

以上是生活随笔為你收集整理的使用vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效的解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。