javascript - Vue onclick事件返回错误的srcElement

Question

为什么onclick事件返回错误的srcElement即使我将onclick放在父元素上它仍然返回子元素点击事件的来源。如何才能使其始终选择放置 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

您必须使用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>