小程序事件系统 —— 32 事件系统 - 事件分类以及阻止事件冒泡

在微信小程序中,事件分为 冒泡事件非冒泡事件

冒泡事件:当一个组件的事件被触发后,该事件会向父节点传递;(如果父节点中也绑定了一个事件,父节点事件也会被触发,也就是说子组件的事件和父组件的事件都会被触发);

非冒泡事件:当一个组件的事件被触发后,该事件不会向父节点传递;(如果父节点绑定了事件,父节点的事件不会被触发,只有组件本身的事件会触发);

在微信小程序中,使用 bind 绑定的事件,会触发事件冒泡,如果想阻止事件冒泡,可以使用 catch 来绑定事件;

下面使用微信开发者工具来演示一下,在基于上一节的内容下进行演示,在 pages/cate/cate.wxml 中添加以下代码:

<view class="catch" bind:tap="parentHandler"><button bind:tap="btnHandler">按钮</button>
</view>

在 pages/cate/cate.scss 中添加以下样式代码:

.catch {display: flex;height: 300rpx;background-color: skyblue;align-items: center;
}

在 pages/cate/cate.js 中添加以下函数:

Page({parentHandler(){console.log('父组件绑定的事件')},btnHandler(){console.log('子组件触发的事件')}
})

编写完毕后,点击重新编译,点击页面的按钮,可以看到子组件和父组件绑定的事件都触发了,如下:

在这里插入图片描述
如果想实现点击子组件按钮的时候,只触发子组件的事件,父组件的事件不触发,则需要阻止子组件的事件冒泡;如果想阻止子组件的事件冒泡,就需要更改一下绑定事件的方式,我们需要把子组件绑定事件的方式从 bind:tap 修改为 catch:tap,如下:

<view class="catch" bind:tap="parentHandler"><button catch:tap="btnHandler">按钮</button>
</view>

重新运行,点击按钮,可以发现父组件的事件没有触发,如下:

在这里插入图片描述
参考视频:尚硅谷微信小程序开发教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/71781.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【从0到1搞懂大模型】神经网络的实现:数据策略、模型调优与评估体系(3)

一、数据集的划分 &#xff08;1&#xff09;按一定比例划分为训练集和测试集 我们通常取8-2、7-3、6-4、5-5比例切分&#xff0c;直接将数据随机划分为训练集和测试集&#xff0c;然后使用训练集来生成模型&#xff0c;再用测试集来测试模型的正确率和误差&#xff0c;以验证…

Django与数据库

我叫补三补四&#xff0c;很高兴见到大家&#xff0c;欢迎一起学习交流和进步 今天来讲一讲alpha策略制定后的测试问题 mysql配置 Django模型体现了面向对象的编程技术&#xff0c;是一种面向对象的编程语言和不兼容类型能相互转化的编程技术&#xff0c;这种技术也叫ORM&#…

从 GitHub 批量下载项目各版本的方法

一、脚本功能概述 这个 Python 脚本的主要功能是从 GitHub 上下载指定项目的各个发布版本的压缩包&#xff08;.zip 和 .tar.gz 格式&#xff09;。用户需要提供两个参数&#xff1a;一个是包含项目信息的 CSV 文件&#xff0c;另一个是用于保存下载版本信息的 CSV 文件。脚本…

ECC升级到S/4 HANA的功能差异 物料、采购、库存管理对比指南

ECC升级到S/4 HANA后&#xff0c;S4 将数据库更换为HANA后性能有一定提升&#xff0c;对于自开发程序&#xff0c;可以同时将计算和部分业务逻辑下推到HANA数据库层&#xff0c;减少应用层和数据库层的交互次数和数据传输&#xff0c;只返回需要的结果到应用层和显示层。提升自…

表格columns拼接两个后端返回的字段(以umi框架为例)

在用组件对前端项目进行开发时&#xff0c;我们会遇到以下情况&#xff1a;项目原型中有取值范围这个表字段&#xff0c;需要存放最小取值到最大取值。 而后端返回给我们的数据是返回了一个最小值和一个最大值&#xff0c; 在columns中我们需要对这两个字段进行拼接&#xff0…

使用Galaxy创建生物信息学工作流的步骤详解

李升伟 整理 Galaxy 是一个基于 Web 的生物信息学平台&#xff0c;提供了直观的用户界面和丰富的工具&#xff0c;帮助用户创建和管理生物信息学工作流。以下是使用 Galaxy 创建生物信息学工作流的主要步骤&#xff1a; 1. 访问 Galaxy 平台 打开 Galaxy 的官方网站&#xff…

蓝桥杯—走迷宫(BFS算法)

题目描述 给定一个NM 的网格迷宫 G。G 的每个格子要么是道路&#xff0c;要么是障碍物&#xff08;道路用 11表示&#xff0c;障碍物用 0 表示&#xff09;。 已知迷宫的入口位置为 (x1​,y1​)&#xff0c;出口位置为 (x2​,y2​)。问从入口走到出口&#xff0c;最少要走多少…

【GPT入门】第12课 FunctionCall 生成数据库sql代码

【GPT入门】第12课 FunctionCall 生成数据库sql代码 1.概述2. 代码3.执行结果 1.概述 如下代码的任务&#xff1a;自然语言问ai,自动生成sql并回答用户 实现思路&#xff1a; 步骤1. ai会把用户的问题&#xff0c;转为sql 步骤2. 程序执行sql 步骤3.把执行的sql结果&#xff…

《白帽子讲 Web 安全》之身份认证

目录 引言 一、概述 二、密码安全性 三、认证方式 &#xff08;一&#xff09;HTTP 认证 &#xff08;二&#xff09;表单登录 &#xff08;三&#xff09;客户端证书 &#xff08;四&#xff09;一次性密码&#xff08;OTP&#xff09; &#xff08;五&#xff09;多因…

服务器python项目部署

角色&#xff1a;root, 其他用户应该也可以 1. 安装python3环境 #如果是新机器&#xff0c;尽量执行&#xff0c;避免未知报错 yum -y update python -v yum install python3 python3 -v2. 使用virtualenvwrapper 创建虚拟环境,并使用workon切换不同的虚拟环境 # 安装virtua…

更新vscode ,将c++11更新到c++20

要在CentOS系统中安装最新版本的GCC&#xff0c;你可以使用SCL&#xff08;Software Collections&#xff09;仓库&#xff0c;它提供了开发工具的最新版本。以下是安装步骤&#xff1a; 1、 添加SCL仓库&#xff1a; 首先&#xff0c;添加CentOS的SCL仓库&#xff0c;该仓库…

Deeplabv3+改进5:在主干网络中添加EMAattention|助力涨点!

🔥【DeepLabv3+改进专栏!探索语义分割新高度】 🌟 你是否在为图像分割的精度与效率发愁? 📢 本专栏重磅推出: ✅ 独家改进策略:融合注意力机制、轻量化设计与多尺度优化 ✅ 即插即用模块:ASPP+升级、解码器 PS:订阅专栏提供完整代码 目录 论文简介 步骤一 步骤二…

基于自监督三维语义表示学习的视觉语言导航

前言 目前的视觉语言导航存在的问题&#xff1a; &#xff08;1&#xff09;在VLN任务中&#xff0c;大多数当前方法主要利用RGB图像&#xff0c;忽略了环境固有的丰富三维语义数据。许多语义无关的纹理细节不可避免地被引入到训练过程中&#xff0c;导致模型出现过拟合问题&…

网络原理之HTTPS(如果想知道网络原理中有关HTTPS的知识,那么只看这一篇就足够了!)

前言&#xff1a;随着互联网安全问题日益严重&#xff0c;HTTPS已成为保障数据传输安全的标准协议&#xff0c;通过加密技术和身份验证&#xff0c;HTTPS有效防止数据窃取、篡改和中间人攻击&#xff0c;确保通信双方的安全和信任。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要…

【江协科技STM32】ADC数模转换器-学习笔记

ADC简介 ADC&#xff08;Analog-Digital Converter&#xff09;模拟-数字转换器ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁&#xff0c;ADC是一种将连续的模拟信号转换为离散的数字信号的设备或模块12位逐次逼近型…

文件系统文件管理

文件缓冲区&#xff08;内核级&#xff0c;OS内部的&#xff09;存在的意义&#xff1a;系统调用将数据写入缓冲区后函数即可返回&#xff0c;是从内存到内存的&#xff0c;提高了程序的效率。之后将缓冲区数据刷新到硬盘则是操作系统的事了。无论读写&#xff0c;OS都会把数据…

HTML 标签语义化指南:让网页更易读

HTML 语义化标签是指在 HTML 中使用具有明确含义的标签来标记网页内容的结构和意义。这些标签可以提供更多的语义信息&#xff0c;有助于搜索引擎理解网页内容&#xff0c;并为使用辅助技术的用户提供更好的访问体验。 以下是一些常见的HTML语义化标签及其含义和用途&#xff…

机器学习:线性回归,梯度下降,多元线性回归

线性回归模型 (Linear Regression Model) 梯度下降算法 (Gradient Descent Algorithm) 的数学公式 多元线性回归&#xff08;Multiple Linear Regression&#xff09;

共绘智慧升级,看永洪科技助力由由集团起航智慧征途

在数字化洪流汹涌澎湃的当下&#xff0c;企业如何乘风破浪&#xff0c;把握转型升级的黄金机遇&#xff0c;已成为所有企业必须直面的时代命题。由由集团&#xff0c;作为房地产的领航者&#xff0c;始终以前瞻视野引领变革&#xff0c;坚决拥抱数字化浪潮&#xff0c;携手数字…

laravel es 相关代码 ElasticSearch

来源&#xff1a; github <?phpnamespace App\Http\Controllers;use Elastic\Elasticsearch\ClientBuilder; use Illuminate\Support\Facades\DB;class ElasticSearch extends Controller {public $client null;public function __construct(){$this->client ClientB…