问题背景
在页面与 js 传值中我们经常用到 data-id=”1″ 的方式,然后通过 e.target.dataset.id 取 id 的值
今天在获取值时怎么也取不到
问题分析
后来发现 e 对象有 currentTarget 和 target 属性,而 dataset 就在 currentTarget 中,所以通过 e.currentTarget.dataset.id 取到了正确的值。
另外 data-id=”1″ 最好不要用驼峰命名如:data-Id=”1″,这样有时候也取不到值。
HTML5 自定义属性
网站中经常会看到以 data- 开头的属性定义, 虽然 W3C 不认定, 但最新 HTML5 规定 data- 是合理的, 在 HTML5 中, 任何以 data- 开始的都是自定义属性, 通常它用来实现一些 HTML 里没有明确定义的元素, 把用户自定义的属性应用到代码中
微信小程序文档
什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id, dataset, touches。
事件的使用方式
在组件中绑定一个事件处理函数。
如 bindtap,当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
在相应的 Page 定义中写上相应的事件处理函数,参数是 event。
Page({tapName: function(event) {console.log(event)
}
})
可以看到 log 出来的信息大致如下:
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {"hi":"WeChat"}
},
"currentTarget": {
"id": "tapTest",
"dataset": {"hi":"WeChat"}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
使用 WXS 函数响应事件