Vue.js v-on:click get target Example ( click 事件取得自己 )

在重構工作上的一段小程式，轉而使用 Vue 寫一點小功能。


我發現若在一個含有很多子元素的 element 上加上 on click 事件，在 click 的時候很容易點到子元素，而造成 event.target 拿到的內容可能不一致 (應該說非預期)。所以要拿到預期的 element，要用 currentTarget。 其實這跟 vue 本身沒有什麼關係，而是跟冒泡事件有關。
(真不知道該不該說是自己犯了這種蠢錯...)，嚴格來說是要 google搜尋 event.target 跟 event.currentTaget。

一個範例:

<div id="app">
    <div class="wiget" v-on:click="toggleWidget">
        <h3>Widget Name 2</h3>
        <span class="fa fa-xxxx">some icon here</span>
    </div>
    <div class="wiget" v-on:click="toggleWidget">
        <h3>Widget Name 2</h3>
        <span class="fa fa-xxxx">some icon here</span>
    </div>
    <div class="wiget" v-on:click="toggleWidget">
        <h3>Widget Name 3</h3>
        <span class="fa fa-xxxx">some icon here</span>
    </div>
  </div>

// js
new Vue({
  el: '#app',
  methods: {
     toggleWidget: function(event) {
        console.info('event.target', event.target);
        console.info('event.currentTarget', event.currentTarget);
     },
  }
});

// console (1)
// 這一次點按 taget 拿到非預期的 element，他明確地抓到我是點裡面的 span
event.target <span class=​"fa fa-xxxx">​some icon here​</span>​
// 但是 currentTarget 可以明確地抓到我是點到整組 widget
event.currentTarget <div class=​"wiget">​…​</div>​

// console (2)
// 這一次點按 taget 拿到預期的 element，這是我要的結果，但是容易發生跟上一次拿錯的情況
event.target <div class=​"wiget">​…​</div>​
// 但是 currentTarget 可以明確地抓到我是點到整組 widget
event.currentTarget <div class=​"wiget">​…​</div>​

​

相關的問題參考:
[github] v-on:click with target not in the correct element? #2236
事件会在子元素上触发 #2222