【微信小程序】e.target.id和e.currentTarget.dataset.id的区别

1.需求

page1展示一个列表，选中列表中的一项，获取该项的一些属性值，set到缓存里。

page2 onLoad时从缓存里读取这个缓存，进行使用。

2.原始代码

①page1的xml文件 列表

<view wx:for="{{courseList}}">
    <template is="course_temp" data="{{item}}"></template>
  </view>

每一项 如下

<template name="course_temp">
  <view class='course_tap' data-name="{{item.courseName}}" id="{{item.courseId}}" bindtap='chooseCourse' >
    <text class='course_name'>{{item.courseName}}</text>
    <text class='course_teacher'>{{item.teacher}}</text>
  </view>
</template>

②在page1.js中，响应点击事件，用e.target.id读取被选中组件的id值。

chooseCourse: function (e) {
    console.log("你选择的课程id是"+e.target.id);
    wx.setStorageSync('courseId', "" + e.target.id);
    wx.setStorageSync('courseName', e.currentTarget.dataset.name);
    wx.navigateTo({
      url: '../../pages/reaction/reaction'
    })
  },

3.bug来了

在page2中，从缓存里读取courseId.

var id = wx.getStorageSync('courseId');

有时候能获取到，有时候就为null！！！找了很久，最开始以为缓存有问题。后来发现，bug出现的时候，从e.target.id开始就已经是null了。思考之后，courseList会有刷新操作，猜测出现了id相同的项，微信小程序可能进行了处理，导致部分组件id为空。把courseId改到 data-id中，重新获取。（后来证明我的猜测错了，但是解决方案碰巧对了。没有id相同的项。）

<template name="course_temp">
  <view class='course_tap' data-name="{{item.courseName}}" data-id="{{item.courseId}}" bindtap='chooseCourse' >
    <text class='course_name'>{{item.courseName}}</text>
    <text class='course_teacher'>{{item.teacher}}</text>
  </view>
</template>

js中的获取修改为 e.currentTarget.dataset.id，测试之后发现没有问题了！

chooseCourse: function (e) {
    console.log("你选择的课程id是  new" + e.currentTarget.dataset.id);
    wx.setStorageSync('courseId', "" + e.currentTarget.dataset.id);
    wx.setStorageSync('courseName', e.currentTarget.dataset.name);
    wx.navigateTo({
      url: '../../pages/reaction/reaction'
    })
  },

4.区别总结

①e.currentTarget 代表的是，注册了监听点击事件的组件。在本例中，就是外层的View（包含了两个TextView）.

②e.target 代表的是，实际触发了点击事件的组件。

所以重新试一下，点击语文课、小王老师和空白处时，e.target.id 分别为  id1，id2和id3，而e.currentTarget.dataset.id一直都是new1（因为注册点击监听事件的组件，是整个外层View，点击View中的任何部位，都会触发View注册的方法）。