微信小程序 bindtap与catchtap的区别
1、什么是事件
- (1) 事件是视图层到逻辑层的通讯方式。
- (2) 事件可以将用户的行为反馈到逻辑层进行处理。
- (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- (4) 事件对象可以携带额外信息,如 id,dataset,touches
2、如何使用事件
- (1) 简单来说就是将事件绑定到组件上面,bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数。
- (2) 函数tapName会接受一个参数event,event里面存储了一些函数调用的上下文信息
- (3) 标签元素
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
(4) 绑定事件
Page({tapName: function(event) {console.log(event)}
})
3、bindtap和catchtap的区别
- (1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。
- (2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。
4、小程序中事件分为冒泡事件和非冒泡事件。
- (1) 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件
- (2) bindtap:事件绑定不会阻止冒泡事件向上冒泡
- (3) catchtap:事件绑定可以阻止冒泡事件向上冒泡
5、例子
1、假如有三个view点击事件都是用的bindtap,三个view是层级包含关系?
<view id="outer" bindtap="out">outer view<view id="middle" bindtap="middle">middle view<view id="inner" bindtap="inner">inner view</view></view>
</view>
2、我么在js里代码是在相对应的事件打印出log,代码如下:
out:function(e){console.log("--out bindtap click")
},
middle: function (e) {console.log("--middle bindtap click")
},
inner: function (e) {console.log("--inner bindtap click")
}
3、bindtap执行结果
- 点击out view打印出一条log --> out bindtap click
- 点击middle view打印出两条log --> middle bindtap click–out bindtap click
- 点击innew view打印出三条log --> inner bindtap click–middle bindtap click–out bindtap click
可以看出bindtap不阻止向上冒泡,所以点击inner一直冒泡到了最外层。
4、如果我们只修改middle view的bindtap为catchtap
- 点击out view打印出一条log --> out bindtap click(因为没有上层元素故而无法向上冒泡)
- 点击middle view打印出一条log --> middle bindtap click(catchtap阻止向上冒泡)
- 点击innew view打印出两条log --> inner bindtap click–middle bindtap click(catchtap阻止向上冒泡)
点击链接加入群聊【编程之美】:https://jq.qq.com/?_wv=1027&k=h75BfFCg
微信小程序 bindtap与catchtap的区别相关推荐
- 微信小程序bindtap与catchtap的区别
1.什么是事件 (1) 事件是视图层到逻辑层的通讯方式. (2) 事件可以将用户的行为反馈到逻辑层进行处理. (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. (4) ...
- 微信小程序 bindtap 和 catchtap的区别
bindtap事件会冒泡 catchtap时间不会冒泡
- 微信小程序 bindtap与catchtap的事件使用和区别
1.什么是事件 (1) 事件是视图层到逻辑层的通讯方式. (2) 事件可以将用户的行为反馈到逻辑层进行处理. (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. (4) ...
- 微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡 下面会有一个demo给出解释, ...
- 微信小程序bindtap和carchtap的区别
1. 事件 事件是视图层到逻辑层的通讯方式. 事件是将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当触发该事件时,就会执行逻辑层中对应的事件处理函数. 2. 如何使用事件 将事件绑定到组件 ...
- wx小程序bindtap与catchtap的区别
页面层wxml <!-- bindtap与catchtap的区别 --> <view id="outer" bindtap="handleTap1&qu ...
- [vue] vue和微信小程序写法上有什么区别?
[vue] vue和微信小程序写法上有什么区别?写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下 ...
- 微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件 在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js文件中定义 ...
- 微信小程序与web前端的区别
1 引言 刚接触小程序,会有很多错误的思路去编写,为了避免在代码方面出错,本文将对前端和小程序做一个区分. 2 问题描述 微信小程序与web前端的区别. 3 算法描述 在web的html中我们一般都是 ...
最新文章
- LinearAlgebra_1
- html5盒子模型作业,html5 盒子模型案例
- 运动背景下的运动目标检测
- 谋定智慧农业-农民丰收节·万祥军:京东共聚黑山县三方合力
- 【PM模块】PM模块主数据
- UNITY中使用不安全代码的相关设置
- 清理c盘垃圾的cmd命令_用命令删除系统垃圾,这波操作深藏功与名
- mysql的复制订阅_如何删除发布与复制订阅数据库 'distribuion' 的方法
- QTP学习笔记----2013.04.25
- 三、运算符、表达式和语句
- Python+FFmpeg提取哔哩哔哩安卓缓存
- 计算机刊物SCI影响因子排名
- BZOJ 2429: [HAOI2006]聪明的猴子
- 北航2021编译原理实验样例编译器-PCODE实现总结
- 开源的app后台开源框架汇总
- R语言的graphics画图功能
- Linux一键安装xrdp,如何在Linux系统Ubuntu 20.04中安装xrdp实现远程桌面连接RDP
- TestLink1.6.0安装说明
- 奉劝大家不要再用刷流量软件刷新浪博客等级了
- “源”来是你-Vol.32 | 知名图数据平台 Neo4j 招聘中国社区经理