Vue中注意target和currentTarget的使用

在vue中獲取對象時注意event.currentTarget與event.target的區別。

event.currentTarget指向事件所綁定的元素，而event.target始終指向事件發生時的元素。

列如：

<a href="javascript:;" @click="openPlays($event)" class="openplays-btn">
      展開
      <br>
      <i class="iconfont"></i>
</a>

　　

當點擊a時觸發openPlays，並且往openPlays中傳入當前對象

openPlays (e) {
      console.log(e.target,e.currentTarget)
}

　　

當點擊i區域之外時獲取到的對象分別為：

因為沒點擊到其他的元素，所以event.currentTarget與event.target兩者獲取到的對象都是一樣的。

當點擊a中的i時event.target與event.currentTarget獲取到的對象分別為：

從上面的結果可以看出當使用currentTarget時，不管你點擊的是a或者a之中的任何元素，其獲取到的對象都為綁定事件的a；當使用target時，如果你點擊到a元素則傳a元素，如果點擊到a之中的某個子級元素則傳a之中的某個元素。