H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue-seamless-scroll点击事件无效

在项目中碰到一个走马灯需求,选择使用vue-seamless-scroll插件进行解决

<template>
  <section class="footer-info">
    <vueSeamless :data="infoList" :class-option="options">
      <p v-for="info in infoList" :key="info.id">
        <span @click="handleDetailClick(info.id)">{{info.detail}}</span>
      </p>
    </vueSeamless>
  </section>
</template>

实际页面渲染后会出现点击某些span没有执行事件的情况。这个问题是因为vue-seamless-scroll是用重复渲染一遍内部元素来实现滚动的,而JS的onclick只检测页面渲染时的DOM元素。记得在入门原生JS的时候也经常会遇见这个问题,当时我采用事件委托来解决,现在也采用事件委托来解决这个问题。

在section上绑定事件handleSectionClick,捕获点击的DOM节点,若为span则执行事件。事件中需求的数据可以直接用data绑在相应的span上。

<template>
  <section class="footer-info" @click.stop="handleSectionClick($event)">
    <vueSeamless :data="infoList" :class-option="options">
      <p v-for="info in infoList" :key="info.id">
        <span :data-id="info.id">{{info.detail}}</span>  //将index绑定在span的数据中
      </p>
    </vueSeamless>
  </section>
</template>

<script>
export default {
  methods:{
    handleSectionClick(e){
      let target = e.target;
      if(target.tagName == "SPAN") {
        this.handleDetailClick(target.dataset.id);
      }
    }
  }
}
</script>

保存运行,正常处理了所有span的点击事件

本文地址:H5W3 » vue-seamless-scroll点击事件无效