使用 vue-seamless-scroll 组件时部分数据的点击事件失效

余人于RenYu

于 2024-09-27 11:24:09 发布

阅读量454

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Y_Cfeng/article/details/142588911

版权

问题： 在使用 vue-seamless-scroll 组件纵向无缝自动滚动时，发现滚动到后面的数据，点击的时候，点击事件失效了，完全没有触发？？？

解决： 不能点击的原因是因为滚动组件是将数据复制了一份html出来，进行填铺页面，方便滚动的，而这些复制出来的并没有绑定事件。最后使用事件委托实现子元素的点击事件处理。

关于事件委托

说明：
事件委托理解：https://cloud.tencent.com/developer/article/2434471
相关知识点：
1）事件流：一个完整的事件流包括三个阶段：事件捕获、目标阶段和事件冒泡阶段
2）事件冒泡：事件从目标元素接收，逐层往父组件传播至 document。
3）事件捕获：与事件冒泡相反，从 document 往里直至目标元素接收到。
4）事件委托：就是利用事件流中的冒泡效应，将子元素的处理程序统一绑定到父元素上。

将事件统一放到外层的 div 上，点击一周，利用 composedPath 来获取到支援度绑定的data 数据，来触发点击事件。

<div
            class="list"
            v-if="dataList && dataList.length > 0"
            @click="openBriefing($event)"
          >
            <vue-seamless-scroll
              :data="dataList"
              class="seamless-warp"
              :class-option="defaultOption"
            >
             <!-- 这里的 data 绑定对获取数据是关键 -->
              <div
                class="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; // 拿到数据后赋值
    },