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

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

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

2.原始代码
①page1的xml文件 列表

每一项 如下 {{item.courseName}} {{item.teacher}} ②在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相同的项。）

{{item.courseName}} {{item.teacher}} 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注册的方法）。

作者：Crab0314
来源：CSDN
原文：https://blog.csdn.net/Crab0314/article/details/80065878
版权声明：本文为博主原创文章，转载请附上博文链接！