文章目录
- 1、console.log(e.currentTarget); // 当前触发事件的元素
- 2、console.log(e.currentTarget.dataset); // 所有的 data- 属性
- 3、console.log("e.currentTarget.dataset.pointId:"+ e.currentTarget.dataset.pointId);
- 4、console.log(e.target); // 实际触发事件的元素
- 5、console.log(e.type); // 事件类型,如 "tap"
- 6、console.log(e.timeStamp); // 事件触发时间戳
- 7、console.log("this.data.identificationPoints:"+ JSON.stringify(this.data.identificationPoints));
- 8、console.log("point:"+ JSON.stringify(point));
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
}
这个和点击事件直接相关。让我解释整个数据传递过程:
- 在WXML中绑定数据和点击事件:
<view class="feature-section"
bindtap="updateRightProductId"
data-point-id="{{item.id}}"> <!-- 这里绑定了数据 -->
- 当点击发生时:
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);
}
注意事项:
-
命名规则:
- WXML中:
data-point-id
- JS中:
dataset.pointId
- 连字符会自动转换为驼峰命名
- WXML中:
-
常见用法:
<!-- 绑定多个数据 -->
<view
bindtap="handleTap"
data-id="{{item.id}}"
data-type="{{item.type}}"
data-index="{{index}}">
handleTap(e) {
const { id, type, index } = e.currentTarget.dataset;
// 使用这些数据...
}
- 事件对象 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- 属性
}
这种方式在小程序中非常常用,用于:
- 传递点击元素的相关数据
- 在事件处理函数中识别是哪个元素被点击
- 传递额外的上下文信息