使用 vue-seamless-scroll 组件时部分数据的点击事件失效
问题： 在使用 vue-seamless-scroll 组件纵向无缝自动滚动时，发现滚动到后面的数据，点击的时候，点击事件失效了，完全没有触发？？？
解决： 不能点击的原因是因为滚动组件是将数据复制了一份html出来，进行填铺页面，方便滚动的，而这些复制出来的并没有绑定事件。最后使用事件委托实现子元素的点击事件处理。
关于事件委托
- 说明：
事件委托理解：https://cloud.tencent.com/developer/article/2434471- 相关知识点：
1）事件流：一个完整的事件流包括三个阶段：事件捕获、目标阶段和事件冒泡阶段
2）事件冒泡：事件从目标元素接收，逐层往父组件传播至 document。
3）事件捕获：与事件冒泡相反，从 document 往里直至目标元素接收到。
4）事件委托：就是利用事件流中的冒泡效应，将子元素的处理程序统一绑定到父元素上。
将事件统一放到外层的 div 上，点击一周，利用 composedPath 来获取到支援度绑定的data 数据，来触发点击事件。
<divclass="list"v-if="dataList && dataList.length > 0"@click="openBriefing($event)"><vue-seamless-scroll:data="dataList"class="seamless-warp":class-option="defaultOption"><!-- 这里的 data 绑定对获取数据是关键 --><divclass="list-item"v-for="(item, index) in dataList":key="index":data="JSON.stringify(item)"><div class="flex"><div class="image"></div><div class="name">{{ item.areaName }}</div></div><div class="content">{{ item.content }}</div></div></vue-seamless-scroll></div>
openBriefing(e) {// 解决滚动中复制出来的那份数据，点击失效的问题const path = e.path || (e.composedPath && e.composedPath());let target = path.filter(r => /list-item/.test(r.className)); // 这里的 list-item 就是对应子元素的 class if (target.length) target = target[0];else return;const data = JSON.parse(target.getAttribute('data')); // 单项数据详情，点击那行数据的所有数据this.$refs.briefing.areaName = data.areaName; // 拿到数据后赋值this.$refs.briefing.time = data.dataTime; // 拿到数据后赋值},