Javascript 如何用addEventListener替换@click并使addEventListener像@click一样灵活？

如果没有任何用户移动，Android上的Chrome不允许播放音乐\视频。我发现了一段谷歌的代码，它使用

addEventListener

查看用户交互并播放音乐\视频

由于某些原因，如果使用了

@click

，Android上的Chrome不允许播放曲目。由于调试和阅读大量信息，我发现Chrome开始播放一段时间，但随后停止。这可能是因为Chrome认为点击是一种自动播放，可能会显示一些广告，与用户的交互没有任何关系，因为Chrome需要用户进行明确的操作。如果我开始使用

addEventListener

，Chrome开始播放时不会出现任何问题。我可以使用

addEventListener

，但是：

1） 我需要以某种方式将

trackObj

从模板传递到事件侦听器的函数

2） 可能有数百首曲目，我不知道是否可以将侦听器添加到所有曲目中

<template>
  <div v-for="(trackObj, index) in tagObj.tracks" :key="trackObj.trackId">

    // What I currently have and it works on PC, but not on Anroid + Chrome
    <b-card @click="nextTrack({whatToDo: 'playTrackObj', trackObj: trackObj})"
      class="dragula-move w-100 pl-2" no-body>
      {{ index + 1 }}. {{ trackObj.trackTitle }}
    </b-card>

  </div>
</template>

<script>
  import { mapActions } from 'vuex'

  export default {
    methods: {
      ...mapActions('header', [
        'nextTrack'
      ])
    },

    // This work on Android + Chrome
    mounted () {
      // let self = this

      // let allTracks = document.getElementsByClassName('card dragula-move w-100 pl-2')
      // for (let i = 0; i < allTracks.length; i++) {
      //   allTracks[i].addEventListener('click', function (event) {
      //     self.nextTrack({whatToDo: 'playDefaultTrack'})
      //   })
      // }
    }

  }
</script>

//我目前拥有的，它可以在PC上运行，但不能在Anroid+Chrome上运行
{{index+1}}。{{trackObj.trackTitle}
从“vuex”导入{mapActions}
导出默认值{
方法：{
…映射操作（'header'[
“nextTrack”
])
},
//这项工作在Android+Chrome上进行
挂载（）{
//让self=这个
//让allTracks=document.getElementsByClassName（'card dragula move w-100 pl-2'）
//for（设i=0；i

如果我从

中删除

@click=“nextTrack（…）

，并在

mounted（）

中取消对代码的注释，Android上的Chrome将开始查看用户的交互并开始播放曲目

是否有任何方法可以帮助Android上的Chrome使用+-我的现有代码（即

@click=“nextTrack（…）

）查看用户的点击，或者任何人都可以向我展示如何将self.nextTrack（…）函数可以使用的模板中的

trackObj

传递给EventListener

---

@click.native

没有帮助。

我建议将这些对象作为参数使用自定义指令。见下文：

Vue.directive（'next-track'{
绑定：函数（el、绑定、vnode）{
var vm=vnode.context；
el.addEventListener（'click'，函数（事件）{
vm.nextTrack（{whatToDo:binding.value.whatToDo}）
})
}
})
新Vue({
el:“#应用程序”，
数据：{
留言：“你好！”，
trackObj:‘某物’
},
方法：{
nextTrack（arg）{
log（'nextTrack用'，JSON.stringify（arg）调用）
}
}
})

playTrackObj


单击我们并检查控制台

感谢您提供的清洁解决方案。你能告诉我，在很多项目中添加

addEventListener

可以吗（几百个，甚至一千个）？它是否对性能有任何影响或任何其他缺点？仅挂接事件侦听器不太可能给您带来问题，因为它们将在事件实际发生时执行。如果您真的担心，可以将事件挂接到一个公共父级中，并找到另一种方法来传递每个元素的参数。无论如何，我会继续你目前的方法，只担心它会成为一个明显的问题（这不太可能很快发生）。