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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Crab0314/article/details/80065878

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注册的方法)。


没有更多推荐了,返回首页