微信小程序中 e.target 和 e.currentTarget 的区别

部分摘抄自 官方文档

	target	currentTarget
定义	触发事件的组件的一些属性值集合	当前组件的一些属性值集合
dataset	事件源组件上由 data- 开头的自定义属性组成的集合	当前组件上由 data- 开头的自定义属性组成的集合

<view id="outer" bindtap="handleTap1">
  outer
   <view id="inner" bindtap="handleTap2">
      inner
   </view>
</view>

点击 inner 的时候，两个方法都会执行，点击 outer 的时候，只会执行 handleTap1

handleTap1 (e) {
    console.log('触发 outer')
    console.log('outer target -- ' + e.target.id)
    console.log('outer currentTarget -- ' + e.currentTarget.id)
},
handleTap2 (e) {
    console.log('触发 inner')
    console.log('inner target -- ' + e.target.id)
    console.log('outer currentTarget -- ' + e.currentTarget.id)
}

// 点击 inner
触发 inner
inner target -- son
inner currentTarget -- son
触发 outer
outer target -- son
outer currentTarget -- father

// 点击 outer
触发 outer
outer target -- father
outer currentTarget -- father

总结：

1. 若点击的元素没有子元素，那么 target = currentTarget
2. 若点击的元素有子元素，点击父元素中非子元素区域时，target = currentTarget ；点击子元素区域时，target 为子元素，currentTarget 为父元素；
3. 建议使用 currentTarget ，就不用管那么多了_{_}