小程序e.target.dataset和e.currentTarget.dataset区别

在微信小程序中，事件对象e包含了一些特殊的属性，currentTarget和target是其中两个常用的属性。currentTarget表示触发事件的当前组件，而target是触发事件的原始组件。

e.target和e.currentTarget都有一个dataset属性，这个属性可以获取到组件上绑定的data-*属性集合。不同点在于，e.target获取的是触发事件的源头组件的data-*属性，而e.currentTarget获取的是触发事件的当前组件的data-*属性。

<view id="outer" bindtap="tapHandle">
  外层view
  <view id="inner" data-name="innerView" bindtap="tapHandle">
    内层view
  </view>
</view>

tapHandle(e) {
  console.log(e.target.dataset.name); 
  // 当点击内层view时，输出"innerView"
  console.log(e.currentTarget.dataset.name); 
  // 当点击内层view时，输出"undefined"，因为外层view没有绑定data-name属性
}

在这个例子中，当点击内层view时，e.target指向的是内层view，因此输出内层view的data-name属性。而e.currentTarget指向的是当前触发事件的view，即外层view，因此无法获取到外层view的data-name属性，所以输出undefined。

如果需要获取外层view的data-*属性，可以使用e.currentTarget.dataset。

tapHandle(e) {
  console.log(e.currentTarget.dataset.name); 
  // 当点击内层view时，输出"outerView"
}

标签：程序小程序