html 事件参数值,【已解决】小程序中给点击事件函数传递参数或从html元素中获取值...

现在希望对于小程序：

列表中每行的整个区域，点击后，可以获取对应的此处该book的id

之前html中做法是html中加上个hidden的id，book的click的item中获取对应id

现在要去看看小程序中如何支持

先去加上点击事件

小程序点击事件传参

此处只有单一参数，所以暂时去用id试试

可行之后，再去换用dataset

此处空的callback函数中也可以看到：

currentTarget中的dataset和id

先去加上id试试：

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

其他参数可以通过：

去传递到：

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)

},

和：

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

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.jsbookItemClickCallback: 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