Bootstrap

点击事件的数据传递过程(JS)

1、console.log(e.currentTarget); // 当前触发事件的元素

e.currentTarget:[object Object]
console.log("e.currentTarget:"+ JSON.stringify(e.currentTarget));  // 当前触发事件的元素
e.currentTarget:{"id":"","offsetLeft":11,"offsetTop":0,"dataset":{"pointId":"00000015"}}

2、console.log(e.currentTarget.dataset); // 所有的 data- 属性

{pointId: "00000015"}

3、console.log(“e.currentTarget.dataset.pointId:”+ e.currentTarget.dataset.pointId);

e.currentTarget.dataset.pointId:00000015

4、console.log(e.target); // 实际触发事件的元素

{id: "", offsetLeft: 11, offsetTop: 44, dataset: {}}

在这里插入图片描述

5、console.log(e.type); // 事件类型,如 “tap”

tap

6、console.log(e.timeStamp); // 事件触发时间戳

1836889

7、console.log(“this.data.identificationPoints:”+ JSON.stringify(this.data.identificationPoints));

Page({
  data: {
    identificationPoints: [],
  },
  • 由于identificationPoints是数组,所以打印出来的是个数组
[
    {
        "id": "00000015",
        "createdDate": "2025-01-22 17:53:57",
        "lastModifiedDate": "2025-01-23 20:40:46",
        "displayOrder": 29980,
        "identificationPointTitle": "内部外盖边缘英文清晰美观深浅一致",
        "adminId": 7,
        "description": "产品外盖正面边缘英文文字,真货文字相比假货非常清晰,且深浅一致,真品的制造工艺优秀美观大方",
        "productId": 144,
        "type": "正",
        "relatedIds": [16],
        "publicType": 1,
        "images": [
            "https://www.crossbiog.com/fake-strategy/真-内边缘文字1_369533.JPG",
            "https://www.crossbiog.com/fake-strategy/真-内边缘文字2_372302.JPG"
        ],
        "level": 2
    },
    {
        "id": "00000016",
        "createdDate": "2025-01-22 21:29:44",
        "lastModifiedDate": "2025-01-23 20:40:22",
        "displayOrder": 29980,
        "identificationPointTitle": "内部外盖边缘英文文字模糊深浅不一",
        "adminId": 7,
        "description": "产品外盖正面边缘英文文字,假货文字模糊,深浅不一,和真品照片对比非常容易识别",
        "productId": 144,
        "type": "仿",
        "relatedIds": [11],
        "publicType": 1,
        "images": [
            "https://www.crossbiog.com/fake-strategy/假-内边缘文字1_366212.JPG",
            "https://www.crossbiog.com/fake-strategy/假-内边缘文字2_483800.JPG",
            "https://www.crossbiog.com/fake-strategy/假-内边缘文字3_840118.JPG"
        ],
        "level": 2
    },
    {
        "id": "00000014",
        "createdDate": "2025-01-18 20:53:22",
        "lastModifiedDate": "2025-01-23 21:19:03",
        "displayOrder": 30000,
        "identificationPointTitle": "3057版假货(目用)",
        "adminId": 7,
        "description": "中文标签,产品成分(第三行字):(日用)香精,假货为(目用)香精,这是这一批假货最容易判断的识别点。注意依靠版本号并无法判断真假,真货亦有3057版本号",
        "productId": 144,
        "type": "仿",
        "relatedIds": [21],
        "publicType": 1,
        "images": [
            "https://www.crossbiog.com/fake-strategy/假-3057版中文标签_922705.jpg"
        ],
        "level": 1
    },
    {
        "id": "00000021",
        "createdDate": "2025-01-23 21:18:28",
        "lastModifiedDate": "2025-02-08 10:34:52",
        "displayOrder": 30000,
        "identificationPointTitle": "80057版真货中文标签(日用)",
        "adminId": 7,
        "description": "1、中文标签,产品成分(第三行字):(日用)香精,假货为(目用)香精。\n2、这是这一批假货最容易判断的识别点。\n3、注意依靠版本号并无法判断真假,真货亦有3057版本号。",
        "productId": 144,
        "type": "正",
        "relatedIds": [14],
        "publicType": 1,
        "images": [
            "https://www.crossbiog.com/fake-strategy/真-80057版中文标签_312543.jpg"
        ],
        "level": 1
    }
]

8、console.log(“point:”+ JSON.stringify(point));

const pointId = e.currentTarget.dataset.pointId;
const point = this.data.identificationPoints.find(item => item.id === pointId);
console.log("point:"+ JSON.stringify(point));
{
    "id": "00000015",
    "createdDate": "2025-01-22 17:53:57",
    "lastModifiedDate": "2025-01-23 20:40:46",
    "displayOrder": 29980,
    "identificationPointTitle": "内部外盖边缘英文清晰美观深浅一致",
    "adminId": 7,
    "description": "产品外盖正面边缘英文文字,真货文字相比假货非常清晰,且深浅一致,真品的制造工艺优秀美观大方",
    "productId": 144,
    "type": "正",
    "relatedIds": [16],
    "publicType": 1,
    "images": [
        "https://www.crossbiog.com/fake-strategy/真-内边缘文字1_369533.JPG",
        "https://www.crossbiog.com/fake-strategy/真-内边缘文字2_372302.JPG"
    ],
    "level": 2
}

这个和点击事件直接相关。让我解释整个数据传递过程:

  1. 在WXML中绑定数据和点击事件
<view class="feature-section" 
      bindtap="updateRightProductId" 
      data-point-id="{{item.id}}">  <!-- 这里绑定了数据 -->
  1. 当点击发生时
updateRightProductId: function(e) {  // e 是事件对象
  const pointId = e.currentTarget.dataset.pointId;  // 获取绑定的数据
  // pointId 的值就是 item.id
}

完整的数据流程:

// 1. 假设数据是这样的
data: {
  identificationPoints: [
    {
      id: "00000001",
      type: "伪",
      description: "特征1..."
    }
  ]
}

// 2. WXML中的绑定
// <view data-point-id="{{item.id}}" bindtap="updateRightProductId">

// 3. 点击处理函数
updateRightProductId: function(e) {
  // e.currentTarget.dataset 包含所有以 data- 开头的属性
  // data-point-id 在 dataset 中变成 pointId(自动转换)
  const pointId = e.currentTarget.dataset.pointId;
  
  // 然后可以用这个 pointId 做进一步处理
  const point = this.data.identificationPoints.find(item => item.id === pointId);
}

注意事项:

  1. 命名规则

    • WXML中:data-point-id
    • JS中:dataset.pointId
    • 连字符会自动转换为驼峰命名
  2. 常见用法

<!-- 绑定多个数据 -->
<view 
  bindtap="handleTap"
  data-id="{{item.id}}"
  data-type="{{item.type}}"
  data-index="{{index}}">
handleTap(e) {
  const { id, type, index } = e.currentTarget.dataset;
  // 使用这些数据...
}
  1. 事件对象 e 的常用属性
function handleTap(e) {
  console.log(e.currentTarget);  // 当前触发事件的元素
  console.log(e.target);         // 实际触发事件的元素
  console.log(e.type);           // 事件类型,如 "tap"
  console.log(e.timeStamp);      // 事件触发时间戳
  console.log(e.currentTarget.dataset);  // 所有的 data- 属性
}

这种方式在小程序中非常常用,用于:

  1. 传递点击元素的相关数据
  2. 在事件处理函数中识别是哪个元素被点击
  3. 传递额外的上下文信息
;