现在希望对于小程序：
列表中每行的整个区域，点击后，可以获取对应的此处该book的id
之前html中做法是html中加上个hidden的id，book的click的item中获取对应id
现在要去看看小程序中如何支持
先去加上点击事件
小程序点击事件传参
此处只有单一参数，所以暂时去用id试试
可行之后，再去换用dataset
此处空的callback函数中也可以看到：
currentTarget中的dataset和id
先去加上id试试：
<view class='search_result_books'>
<view
id="{{curBookItem.id}}"
wx:for="{{searchBookList}}"
wx:for-index="bookIdx"
wx:for-item="curBookItem"
wx:key="id"
class='book_list_item'
bindtap='bookItemClickCallback'
>
但是在加id的时候，担心：
此时处于在for循环中：
wx:for-item=”curBookItem”
刚刚指定的curBookItem
在当前view中能用
curBookItem.id
吗？
去试试再说
是可以的：
再去看看click的event中，能否获取到id值：
是可以获取到的：
然后用：
var curBookId = e.currentTarget.dataset.id var curBookId = e.currentTarget.dataset["id"]
都是：undefined
参考：
换用：
var curBookId = e.currentTarget.id
相关代码：
bookItemClickCallback: function(e){
console.log("bookItemClickCallback: e=%o", e)
//redirect to detail page
// var curBookId = e.currentTarget.dataset.id
// var curBookId = e.currentTarget.dataset["id"] // undefined
var curBookId = e.currentTarget.id // 5bd7bf97bfaa44fe2c7415d9
console.log("curBookId=%s", curBookId)
},才获取到值：
后来从log中发现是自己之前看错了：
不是dataset中的id，而是：currentTarget下面的id
其他参数可以通过：
<view bindtap="clickCallback" data-otherVariableName="{{otherVariableValue}}">去传递到：
e.currentTarget.dataset
中
随便去试试：
bookItemClickCallback: function(e){
console.log("bookItemClickCallback: e=%o", e)
//redirect to detail page
// var curBookId = e.currentTarget.dataset.id
// var curBookId = e.currentTarget.dataset["id"] // undefined
var curBookId = e.currentTarget.id // 5bd7bf97bfaa44fe2c7415d9
console.log("curBookId=%s", curBookId)
var difficulty = e.currentTarget.dataset.difficulty
// var difficulty = e.currentTarget.dataset["difficulty"]
console.log("difficulty=%s", difficulty)
},和：
<view class='search_result_books'>
<view
id="{{curBookItem.id}}"
wx:for="{{searchBookList}}"
wx:for-index="bookIdx"
wx:for-item="curBookItem"
wx:key="id"
class='book_list_item'
bindtap='bookItemClickCallback'
data-difficulty="{{curBookItem.grading.difficulty}}"
>效果：
【总结】
对于点击事件：
- 普通html中叫做：click
- on click
- 小程序中叫做：tap
- bindtap
在小程序中挂载了点击事件的callback函数：
index.wxml
<view class='search_result_books'>
<view
id="{{curBookItem.id}}"
wx:for="{{searchBookList}}"
wx:for-index="bookIdx"
wx:for-item="curBookItem"
wx:key="id"
class='book_list_item'
bindtap='bookItemClickCallback'
data-difficulty="{{curBookItem.grading.difficulty}}"
>以及对应的js中的函数：
index.js
bookItemClickCallback: function(e){
console.log("bookItemClickCallback: e=%o", e)
//redirect to detail page
var curBookId = e.currentTarget.id // 5bd7bf97bfaa44fe2c7415d9
console.log("curBookId=%s", curBookId)
var difficulty = e.currentTarget.dataset.difficulty
// var difficulty = e.currentTarget.dataset["difficulty"]
console.log("difficulty=%s", difficulty)
},即可获取到：
- 单个参数且是id：
- 对于普通的，单个要传递的值，往往是id，这时候就可以
- wxml中：id=”{{yourIdValue}}”
- js中：e.currentTarget.id
- 而获取到id值
- 多个其他参数：
- 对于更多的，其他的（多个）参数，可以通过dataset：
- wxml中：data-otherVariableName=”{{otherVariableValue}}”
- js中：
- e.currentTarget.dataset.otherVariableName
- 或：
- e.currentTarget.dataset[“otherVariableName”]
- 而获取到otherVariableName的值：otherVariableValue
转载请注明：在路上 » 【已解决】小程序中给点击事件函数传递参数或从html元素中获取值