关于使用vue-seamless-scroll，滚动到第二遍的时候不能进行点击的问题记录

最新推荐文章于 2025-03-11 17:45:23 发布

被看不起的前端

最新推荐文章于 2025-03-11 17:45:23 发布

阅读量534

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_51391556/article/details/138905390

版权

问题：使用vue-seamless-scroll组件时，循环第一遍可以正常点击，之后不能够正常点击，触发不了点击事件.

解决办法：在vue-seamless-scroll外的父元素上添加点击事件，利用js的事件委托（通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素）

代码：

 <div class="rightBottom scroll__common" @click="clickProp($event)">

        <vueSeamless
            :data="equipmentList"
            :class-option="classOption"
            class="warp"
            style="width: 100%"
        >
          <div :class="getClass(item.equStatus)" v-for="(item,index) in equipmentList"  :key="index" >
            <div class="deviceNum" @click="toDetail(item.eid,item)"  :data-eid="JSON.stringify(item.eid)">
              {{item.code}}
            </div>
            
          </div>
        </vueSeamless>



      </div>






    clickProp(event){
      let eid = event.target.dataset.eid
    
    },

一、在vue-seamless-scroll外的div上添加点击事件

二、在需要点击的元素上添加需要传的数据，我这里只需要传一个eid，':data-eid'用于元素接受数据，后面是传递的数据

三、使用event.target.dataset.eid来输出数据（这边的eid是之前自己定义的data-eid，如果之前定义的比如是data-obj那么这里就是event.target.dataset.obj）