异常处理——bindtap/catchtap绑定事件冒泡情况

WeChat小程序交流（QQ群：769977169）

组件的响应事件绑定，既可以通过bindtap方式，也可以通过catchtap方式。

如果多层嵌套的组件中，同时使用bindtap方式，可能会造成冒泡异常，也就是本应该响应A事件的，却既响应了A事件，也响应了B事件，所以这时候应该需要使用catchtap方式。如：

1、A组件中，绑定事件A1；

2、B组件中，绑定事件B1，且B组件被A组件包含；

3、如果绑定事件A1是通过bindtap实现，且绑定事件B1也是通过bindtap实现，则绑定事件B1执行时，也同时执行了绑定事件A1，这种情况就称为冒泡；

4、如果绑定事件A1是通过bindtap实现，而绑定事件B1是通过catchtap实现，则绑定事件B1执行时，不会执行绑定事件A1；

bindtap绑定事件和catchtap绑定事件，两者存在区别，如下代码所示：

<view bindtap='detailClick'></view>
<view catchtap='detailClick'></view>detailClick: function (even) {wx.showToast({title: '详情',})console.log(even)},

bindtap绑定事件，能够打印出even信息；而catchtap打印不出even信息。即catchtap是不能获取到被绑定的组件的信息。

异常处理——bindtap/catchtap绑定事件冒泡情况相关推荐

关于小程序的bindtap的绑定事件
小程序的事件绑定在组件中绑定一个事件处理函数(bindtap) <view bindtap="handlerTapClick">点击</view> 若想在 ...
点击子元素，不触发父元素，catchtap 阻止事件冒泡
wxml: <view class="shade" bindtap="close"><view class ...
微信小程序阻止事件冒泡
在vue中阻止事件冒泡的方法使用的event.stopPropagation(); 但微信小程序中事件传递的event却没有stopPropagation()这个方法解决方案:将绑定事件的bindt ...
事件冒泡控件示例（转载）
.NET Framework 开发员指南事件冒泡 ASP.NET 页框架提供一种称为"事件冒泡"的技术,允许子控件将事件沿其包容层次结构向上传播.事件冒泡允许在控件层次结构中 ...
JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录一.事件与事件流二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式三.事件对象四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
微信小程序-绑定事件以及bindtap和catchtap的区别
前言在微信小程序的开发过程中我们肯定会遇到时间绑定的问题,这时候我们一般都是采用bandtap或者是catchtap进行事件绑定的.那么他们两个的区别在哪里呢? 一.首先我们要先知道什么是事件微信 ...
JQuery阻止冒泡事件on绑定中异常情况分析
本文转载自https://www.cnblogs.com/tengj/p/4794947.html,纯粹作为日常笔记使用科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部butto ...
微信小程序 bindtap与catchtap的事件使用和区别
1.什么是事件 (1) 事件是视图层到逻辑层的通讯方式. (2) 事件可以将用户的行为反馈到逻辑层进行处理. (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. (4) ...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...

异常处理——bindtap/catchtap绑定事件冒泡情况

异常处理——bindtap/catchtap绑定事件冒泡情况相关推荐

最新文章

热门文章