微信小程序事件對象中e.target和e.currentTarget的區別

在小程序的事件回調觸發時,會接收一個事件對象,事件對象的參數中包含一個target和currentTarget屬性,接下來說說這二者的區別。


首先上代碼:

wxml部分:

<view id='tar-father' bindtap='click'>
    父組件
    <view id='tar-children'>子組件</view>
  </view>
  
wxss部分:

#tar-father{
  width: 300rpx;
  height: 300rpx;
  background-color: skyblue;
}
#tar-children{
  background-color: pink;
}

效果圖
圖片描述

js部分:
  click: function (event) {
    console.log(event.target)
    console.log(event.currentTarget)
  }

當點擊圖中粉色子組件區域時的輸出結果:
圖片描述

event.target 爲其子組件,也就是觸發該事件的源頭組件
event.currentTarget 爲事件所綁定的組件

當點擊圖中藍色父組件區域時的輸出結果:
圖片描述


event.target 爲父組件,因爲觸發的源頭也就是父組件本身
event.currentTarget 始終爲事件所綁定的組件

總結:target對應的是觸發事件的源頭組件,這個組件有可能是子組件,有可能是父組件,主要是看執行動作的區域。而currentTarget始終對應事件所綁定的組件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章