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

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源