微信小程序事件对象的target与currentTarget属性的区别-GIF图解

要点

target 对应的是触发事件的源头组件，这个组件有可能是子组件，有可能是父组件，主要是看执行动作的区域。

currentTarget 始终对应事件所绑定的组件。

.wxml

<view id="out" class="outer box1" bindtap="outerHandle">
  外out
  <view id="cent" class="center box1" bindtap="centerHandle">
  中cent
    <view id="inn" class="inner box1" bindtap="innerHandle">内inn</view>
  </view>
</view>

.wxss

.box1{
  padding: 40px;
}
.outer{
  background-color: rgba(0, 72, 255, 0.57);
}
.center{
  background-color: rgba(255, 0, 0, 0.714);
}
.inner{
  background-color: rgba(0, 128, 0, 0.645);
}

.js

  outerHandle(e){
    console.log('currentTarget:',e.currentTarget.id,'target:',e.target.id,'外')
  },
  centerHandle(e){
    console.log('currentTarget:',e.currentTarget.id,'target:',e.target.id,'中')
  },
  innerHandle(e){
    console.log('currentTarget:',e.currentTarget.id,'target:',e.target.id,'内')
  },

 演示