title: Vue onclick event returns wrong srcElement
body: <p>Why is it that <code>onclick</code> event returns wrong <code>srcElement</code> even if I have put the <code>onclick</code> on the parent element it still return child element as the source of the click event. How can I make it to always select the element where I put the <code>onclick</code> method? Below is my code:</p>
  
  <pre><code>&lt;div class="col-md-4 player-column" v-for="(player, index) in group" v-on:click="selectPlayers" :data-image="player.image"&gt;
      &lt;div class="players"&gt;
          &lt;div class="player-image"&gt;
              &lt;div class="circle"&gt;
                  &lt;img class="img-responsive" v-if="player.image" :src="player.image | alternateIfImageExists(player.teamName, player.firstName+' '+player.familyName, 'small')"&gt;
                  &lt;i class="fa fa-user" aria-hidden="true" v-else&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="player-info"&gt;
              &lt;p class="player-fullname"&gt;{{player.firstName}} {{player.familyName}}&lt;/p&gt;
              &lt;p&gt;{{player.playingPosition}}&lt;/p&gt;
              &lt;p v-if="player.teamCode !== ''"&gt;{{player.teamCode}}&lt;/p&gt;
              &lt;p v-if="player.teamCode == ''"&gt;{{player.teamName}}&lt;/p&gt;
              &lt;img :src="player.team_logo" :alt="player.teamCode"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Vue method</strong></p>
  
  <pre><code>selectPlayers(e) {
      console.log(e);
  }
  </code></pre>
  
  <p><strong>Console logs:</strong></p>
  
  <pre><code>currentTarget:null
  srcElement:div.player-info
  target:div.player-info
  
  currentTarget:null
  srcElement:img.img-responsive
  target:img.img-responsive
  </code></pre>