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

Question

Chrome on Android does not allow to play music\\video if there is no any user movements. I found a piece of Google's code which uses addEventListener which sees user's interactions and plays music\\video.

For some reason, Chrome on Android does not allow to play track if @click is used. Because of debugging and reading lots of info, I found that Chrome starts playing for a moment, but then stops. It probably happens because Chrome thinks that @click is kind of auto-play that may show some adverts and does not have any relation to user's interaction because Chrome requires an explicit action by the user. If I start to use addEventListener , Chrome starts playing without any problems. It could be ok for me to use addEventListener , but:

1) I need somehow to pass trackObj from template to event listener's function;

2) There are could be hundreds of tracks, I do not know if it is ok to add listeners to all of them.

<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>

If I remove @click="nextTrack(...) from <b-card> and uncomment the code in mounted () , Chrome on Android starts to see user's interaction and starts track playing.

Is there any way how to help Chrome on Android to see user's clicks using +- my existing code (ie @click="nextTrack(...) ) or can anyone show me how it is possible to pass to EventListener a trackObj from template which can be used by self.nextTrack(...) function?

@click.native does not help.

Answer 1

I suggest using a custom directive with those objects as arguments. See below:

 Vue.directive('next-track', { bind: function(el, binding, vnode) { var vm = vnode.context; el.addEventListener('click', function(event) { vm.nextTrack({whatToDo: binding.value.whatToDo}) }) } }) new Vue({ el: '#app', data: { message: 'hello!', trackObj: 'something' }, methods: { nextTrack(arg) { console.log('nextTrack called with', JSON.stringify(arg)) } } })

 <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script> <div id="app"> <div v-next-track="{whatToDo: 'playTrackObj', trackObj: trackObj}"> playTrackObj </div> <br> <div v-next-track="{whatToDo: 'click uss!', trackObj: trackObj}"> click us and check the console </div> </div>