微信小程序实现bindtap等事件传参


Posted in Javascript onApril 08, 2019

之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息。

什么是事件

事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息,如 id, dataset, touches。

微信小程序实现bindtap等事件传参

微信小程序实现bindtap等事件传参

看图,因为需要传递的数据比较多,所以我们通过dataset携带参数信息。如果只有一个参数,可以通过id来传递。

详解(以常见的tap点击事情为例)

wxml

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

JS

Page({
 tapName: function(event) {
 console.log(event)
 }
})

event 打印结果

{
"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
}]
}

注意两点:

1、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志,所以第二个单词的首字母大写了,其实可以不用。data-* 属性中不可以存放对象。

2、注意打印结果中target和currentTarget的区别。

  • target 触发事件的源组件。
  • currentTarget 事件绑定的当前组件。

如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。
由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以currentTarget 依然可以拿到参数。

说明

id传参和dataset类似,只是最后获取值的时候不同。event.currentTarget.id

PS:小程序 view使用bindtap传值问题

如图,view标签 加 bindtap事件,用data-name传值,如果view中只有文字,点击整个view区域都可以接收到data-name的值,如果view里面加一个lable标签,那么点击lable包裹的区域,data-name取不到值。  解决方法:把取值方式  由e.target.dataset.carrierName  修改为e.currentTarget.dataset.carrierName即可

微信小程序实现bindtap等事件传参

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
详解vue中axios请求的封装
Apr 08 #Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 #Javascript
vue+element+Java实现批量删除功能
Apr 08 #Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 #Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 #Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 #Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
pdo中使用参数化查询sql
2011/08/11 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
jquery tools之tooltip
2009/07/25 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
python处理html转义字符的方法详解
2016/07/01 Python
Python输出带颜色的字符串实例
2017/10/10 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
如何教少儿学习Python编程
2020/07/10 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
护士自荐信
2013/10/25 职场文书
求职自荐信
2013/12/14 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
初中英语教学反思范文
2016/02/15 职场文书
六年级作文之预言作文
2019/10/25 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang