Vue onclick事件returns错误的srcElement

Question

为什么 onclick 事件 return 错误 srcElement 即使我将 onclick 放在父元素上它仍然是 return 子元素元素作为点击事件的来源。如何让它始终 select 我放置 onclick 方法的元素？下面是我的代码：

<div class="col-md-4 player-column" v-for="(player, index) in group" v-on:click="selectPlayers" :data-image="player.image">
    <div class="players">
        <div class="player-image">
            <div class="circle">
                <img class="img-responsive" v-if="player.image" :src="player.image | alternateIfImageExists(player.teamName, player.firstName+' '+player.familyName, 'small')">
                <i class="fa fa-user" aria-hidden="true" v-else></i>
            </div>
        </div>
        <div class="player-info">
            <p class="player-fullname">{{player.firstName}} {{player.familyName}}</p>
            <p>{{player.playingPosition}}</p>
            <p v-if="player.teamCode !== ''">{{player.teamCode}}</p>
            <p v-if="player.teamCode == ''">{{player.teamName}}</p>
            <img :src="player.team_logo" :alt="player.teamCode">
        </div>
    </div>
</div>

Vue 方法

selectPlayers(e) {
    console.log(e);
}

控制台日志：

currentTarget:null
srcElement:div.player-info
target:div.player-info

currentTarget:null
srcElement:img.img-responsive
target:img.img-responsive

Answer 1

target, srcElement 是触发事件的元素（例如，用户点击)
currentTarget 是事件侦听器附加到的元素。

Answer 2

通过在调用方法时添加 this 作为参数，我能够获取元素的来源 was

v-on:click="selectPlayers(this)"

方法：

selectPlayers(e) {
   console.log(e);
}

Answer 3

你必须使用 currentTarget.

<template>
  <div>
    <a @mouseover="mouseover"><img src="" /></a>
  </div>
</template>


<script type="text/javascript">
  export default {
    name: 'component',
    methods: {
      mouseover(e) {
        //e.currentTarget will always return a
      }
    }
  }
</script>

Vue onclick事件returns错误的srcElement

Vue onclick event returns wrong srcElement

javascript

dom-events

vue.js

vue-component