关于vue-seamless-scroll无缝滚动 如何给子元素添加点击事件

3,757 阅读1分钟

vue-seamless-scroll 无缝滚动 clone的dom只包含了dom结构, 不包含原先绑定的事件,这里使用事件委托把子元素的事件委托给父元素统一处理。

废话不多说直接上代码

// DOM
  <vue-seamless  @click.native="parentClick"> // 这里必须用 click.native 
    <ul>
      <li v-for='(item,index) in arr'
          :key="item.id">
        <a :data-id="item.id">  //  这里可以定义data-* 属性
        {{item.info}}
        </a>
      </li>
    </ul>
  </vue-seamless>

// methods
methods: {
    parentClick (e) {
    // 注册事件委托
      if (e.target.tagName == 'A') {      // 判断事件源是否是A标签
        console.log(e.target.dataset.id)  // 这里获取点击节点的 data-id
      }
    }
  }

转载请注明出处

juejin.cn/post/684490…