没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序bindtap事件与冒泡阻止详解
5星 · 超过95%的资源 2 下载量 45 浏览量
2020-10-16
14:25:06
上传
评论
收藏 43KB PDF 举报
温馨提示
试读
2页
主要介绍了小程序bindtap事件与冒泡阻止详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
资源推荐
资源详情
资源评论
微信小程序微信小程序bindtap事件与冒泡阻止详解事件与冒泡阻止详解
主要介绍了小程序bindtap事件与冒泡阻止详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有
一定的参考学习价值,需要的朋友可以参考下
bindtap就是点击事件
在在.wxml文件绑定文件绑定:
<text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text>
在一个组件的属性上添加bindtap并赋予一个值(一个函数名)
当点击该组件时, 会触发相应的函数执行
在后台在后台.js文件中定义文件中定义tapMessage函数函数:
//index.js
Page({
data: {
mo: 'Hello World!!',
userid : '1234',
},
// 定义函数
tapMessage: function(event) {
console.log(event.target.id); // 可获得
console.log(event.target.name); // 无法获得, 通过target只能直接获取id
console.log(event.target.dataset); // 要获得其它属性, 需要从dataset(数据集)中获取
console.log(event.target.dataset.userxxx); // userxxx为自定义的属性名, 但命名方式为:data-userxxx
// 这里还原使用userXxx
console.log(event.target.dataset.userXxx);
}
})
event封装的是该事件的信息, 如上通过它可得到一些数据
注意一点注意一点:
<!-- data-userXxx,这个大写的X要改为-x -->
<text id='textId' data-user-xxx='100' bindtap='tapMessage'>cilck here</text>
自定义数据(data-)中的大写改为 短横线+其小写
取数据时, 去掉data和那些短横线并还原大写 (data-user-xxx --> userXxx)
事件冒泡就是指嵌套事件发生
如果多层标签嵌套如果多层标签嵌套, 里层事件发生后里层事件发生后, 其外层会相应发生其外层会相应发生, 如如:
<view bindtap='handout'>
outer
<view bindtap='handmiddle'>
middle
<view bindtap='handinner'>inner</view>
</view>
</view>
handout: function () {
console.log("out");
},
handmiddle: function () {
console.log("middle");
},
handinner: function () {
console.log("inner");
}
点击inner三个事件都执行, 点击middlek执行handmiddle和handout, 点击out只执行handout
阻止事件冒泡行为: 将bindtap改为catchtap就行了, 只会触发自身的点击事件
<view bindtap='handout'>
outer
<view catchtap='handmiddle'>
middle
<view bindtap='handinner'>inner</view>
weixin_38746387
- 粉丝: 332
- 资源: 1308
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页