【微信小程序】事件分类以及阻止事件冒泡
在微信小程序中,事件分为冒泡事件和非冒泡事件两大类,它们的区别在于事件是否能从原始触发组件开始,向父级组件传播(即“冒泡”)。
-
冒泡事件:当一个组件上的事件被触发后,不仅当前组件会接收到这个事件,其父级组件也会按顺序接收到这个事件,直到事件被消耗或到达最外层。这一过程类似于水泡从水底上升到水面,故称为“冒泡”。
-
非冒泡事件:非冒泡事件触发时,仅当前组件会接收到该事件,不会向上传播到父组件。这类事件在触发后立即停止,不会影响到其他层级的组件。
⭐使用 bind 绑定的事件,会触发事件冒泡,如果想阻止事件冒泡,可以使用 catch 来绑定事件
代码演示:
wxml:
<view class="catch" bind:tap="parentHandler"><button bind:tap="childHandler">按钮</button>
</view>
wcss:
.catch{display: flex;height: 200rpx;background-color: aqua;align-items: center;
}
.js:
Page({parentHandler(){console.log("父组件事件")},childHandler(){console.log("子组件事件")},
})
点击页面中的按钮,查看输出,可以看到父组件的事件也触发了

上述问题就是事件冒泡.
要想阻止事件冒泡也很简单,将 bind改成 catch 即可
wxml:
<view class="catch" bind:tap="parentHandler"><button catch:tap="childHandler">按钮</button>
</view>
效果:

相关文章:
【微信小程序】事件分类以及阻止事件冒泡
在微信小程序中,事件分为冒泡事件和非冒泡事件两大类,它们的区别在于事件是否能从原始触发组件开始,向父级组件传播(即“冒泡”)。 冒泡事件:当一个组件上的事件被触发后,不仅当前组件会接收到这…...
踩坑!被node-sass折磨的一天
文章目录 被node-sass折磨的一天折磨过程了解原因注意事项 被node-sass折磨的一天 折磨过程 起因是要开发一个老项目,照常拉代码、下依赖、启动三步走 依赖开始下载不对了,以为是node版本问题,寻找node-sass对应的node版本 利用nvm&#…...
App UI 风格打造独特体验
App UI 风格打造独特体验...
【学习笔记8】阅读StyleID论文源码
论文【链接】 源码【链接】 一、DDIM eta ddim_step表示执行几轮去噪迭代,eta表示DDPM和DDIM的插值系数。当eta0时,为DDPM;当eta≠0时,为DDIM。 参考 DDIM 简明讲解与 PyTorch 实现:加速扩散模型采样的通用方法 【s…...
wordpress旅游网站模板
旅行社wordpress主题 简洁实用的旅行社wordpress主题,适用于旅行社建网站的wordpress主题模板。 https://www.jianzhanpress.com/?p4296 旅游WordPress主题 简洁实用的旅游WordPress主题,适合做旅游公司网站的WordPress主题模板。 https://www.jian…...
vs2019 c++20规范 STL 库中头文件 <atomic> 源码注释及探讨几个知识点
(1 探讨一) 模板类 atomic 的继承关系与数据结构如下: (2 探讨二 ) 可见 atomic 的 fetch_xx 函数,返回的都是 atomic 中存储的旧值。测试如下: 谢谢...
Flink任务如何跑起来之 2.算子 StreamOperator
Flink任务如何跑起来之 2.算子 StreamOperator 前文介绍了Transformation创建过程,大多数情况下通过UDF完成DataStream转换中,生成的Transformation实例中,核心逻辑是封装了SimpleOperatorFactory实例。 UDF场景下,DataStream到…...
学习笔记——路由网络基础——路由优先级(preference)
1、路由优先级(preference) 路由优先级(preference)代表路由的优先程度。当路由器从多种不同的途径获知到达同一个目的网段的路由(这些路由的目的网络地址及网络掩码均相同)时,路由器会比较这些路由的优先级,优选优先级值最小的路由。 路由来源的优先…...
数据预处理——调整方差、标准化、归一化(Matlab、python)
对数据的预处理: (a)、调整数据的方差; (b)、标准化:将数据标准化为具有零均值和单位方差;(均值方差归一化(Standardization)) (c)、最值归一化,也称为离差标准化,是对原始数据的…...
opencv_特征检测和描述
理解特征 寻找独特的特定模式或特定特征,可以轻松跟踪和比较。 拼图:在图像中搜索这些特征,找到它们,在其他图像中查找相同的特征并对齐它们。而已。 基本上,角被认为是图像中的好特征。 在本单元中,我…...
CID引流电商下的3C产品选品策略深度解析
摘要:随着电商行业的迅猛发展和消费者需求的日益多样化,CID引流电商作为一种新兴的电商模式,逐渐受到了广泛关注。在这一模式下,3C产品作为高客单价、高技术含量的代表品类,其选品策略的制定显得尤为重要。本文将从多…...
DeepSORT(目标跟踪算法)中的状态向量与状态转移矩阵
DeepSORT(目标跟踪算法)中的状态向量与状态转移矩阵 flyfish 状态转移矩阵(State Transition Matrix)F的构造 这篇是一定要看的,拖到文章的最后部分,需要理解状态转移矩阵怎么来的,怎么是这个…...
李宏毅深度学习01——基本概念简介
视频链接 基本概念 Regression(回归): 类似于填空 Classification(分类): 类似于选择 Structure Learning(机器学习): ?? 机器学习找对应函数…...
TcpClient 服务器、客户端连接
TcpClient 服务器 TcpListener 搭建tcp服务器的类,基于socket套接字通信的 1 创建服务器对象 TcpListener server new TcpListener(IPAddress.Parse("127.0.0.1"), 3000); 2 开启服务器 设置最大连接数 server.Start(1000); 3 接收客户端的链接,只能…...
13大最佳工程项目管理系统软件盘点
国内外主流的13款工程项目管理系统软件:Worktile、中建软件、泛微建筑项目管理软件、LiquidPlanner、Wrike、建文软件、广联达、Microsoft Project、泛普软件、Procore、Buildertrend、Fieldwire、Autodesk Construction Cloud。 在快速变化的工程领域,有…...
SpringMVC:拦截器(Interceptor)
1. 简介 拦截器(Interceptor)类似于过滤器(Filter) Spring MVC的拦截器作用是在请求到达控制器之前或之后进行拦截,可以对请求和响应进行一些特定的处理。拦截器可以用于很多场景下: 1. 登录验证…...
【Python】selenium使用find_element时解决【NoSuchWindowException】问题的方法
NoSuchWindowException 是 Selenium WebDriver 中的一种异常,当尝试切换到一个不存在的窗口时,或者在尝试获取窗口句柄时窗口已经关闭或不存在,就会抛出这个异常。 以下是一些解决 NoSuchWindowException 的常见方法: 检查窗口是…...
PTA:7-188 水仙花数
作者 王秀秀 单位 山东交通学院 任务描述 本关任务:输出100到999之间的所有的“水仙花数”。所谓的“水仙花数”是指一个3位数,其各位数字立方和等于该数本身。 例如,153是一个水仙花数,因为 15313 53 33 提示 关键在于对一…...
HTML静态网页成品作业(HTML+CSS+JS)—— 美食企业曹氏鸭脖介绍网页(4个页面)
🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,使用Javacsript代码实现 图片轮播切换,共有4个页面。 二、…...
SCI二区|鲸鱼优化算法(WOA)原理及实现【附完整Matlab代码】
目录 1.背景2.算法原理2.1算法思想 3.结果展示4.参考文献5.代码获取 1.背景 2016年,S Mirjalili受到自然界座头鲸社会行为启发,提出了鲸鱼优化算法(Whale Optimization Algorithm, WOA)。 2.算法原理 WOA模拟了座头鲸的社会行为…...
避坑指南:Pyannote3.1+Whisper本地部署的5个常见报错解决方案
避坑指南:Pyannote3.1Whisper本地部署的5个常见报错解决方案 语音处理技术正在重塑教育、会议记录和客服质检等场景的交互方式。当开发者尝试将Whisper的精准语音识别与Pyannote的说话人分离能力结合时,常会在环境配置环节遭遇"拦路虎"。本文…...
别再让PowerBI报告挤成一团了!用按钮+书签,一个页面搞定趋势和明细分析
PowerBI交互设计进阶:用按钮与书签打造空间魔术 当业务分析报告遇上数据爆炸时代,信息过载与界面拥挤成为每个分析师挥之不去的噩梦。我曾见过某零售企业的季度分析仪表板——12个图表密密麻麻挤在A4纸大小的画布上,趋势线相互缠绕ÿ…...
Dify知识库创建全攻略:从零开始搭建你的AI问答系统(附分段模式详解)
Dify知识库创建全攻略:从零开始搭建你的AI问答系统(附分段模式详解) 在AI技术快速渗透各行各业的今天,构建专属知识库已成为企业智能化转型的核心基础设施。Dify作为一款开箱即用的AI应用开发平台,其知识库功能尤其适合…...
【路径规划】传统A星+改进A星(star)彩色蔓延路径规划算法Matlab代码
✅作者简介:热爱科研的Matlab仿真开发者,擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页:Matlab科研工作室👇 关注我领取海量matlab电子书和…...
信息安全毕设容易的项目选题汇总
0 选题推荐 - 网络与信息安全篇 毕业设计是大家学习生涯的最重要的里程碑,它不仅是对四年所学知识的综合运用,更是展示个人技术能力和创新思维的重要过程。选择一个合适的毕业设计题目至关重要,它应该既能体现你的专业能力,又能满…...
别再让AI失忆了!手把手教你用Mem0为ChatGPT添加长期记忆(附Next.js实战代码)
为Next.js聊天应用注入长期记忆:Mem0集成实战指南 当你的AI助手开始记住用户的咖啡偏好和生日祝福时,整个交互体验会发生质的变化。本文将带你从零开始,在Next.js应用中实现这种"记忆魔法"。 1. 环境准备与Mem0初始化 首先创建一个…...
别再手动改配置了!用Flutter的--dart-define实现开发/测试/生产环境一键切换
Flutter多环境配置实战:用--dart-define打造全链路自动化工作流 每次切换环境都要手动修改十几个配置项?还在为不同环境的API地址、应用图标和包名管理头疼?是时候告别这种低效的开发方式了。作为一位经历过无数个深夜调试环境的Flutter开发者…...
ms-swift微调框架入门:快速掌握LoRA微调与模型合并技巧
ms-swift微调框架入门:快速掌握LoRA微调与模型合并技巧 1. 引言 在当今大模型技术快速发展的背景下,如何高效地对大型语言模型进行微调成为了许多开发者和研究者的关注焦点。ms-swift作为一款强大的微调框架,提供了丰富的功能和技术支持&am…...
MoveIt 2 Launch文件进阶:如何用MoveItConfigsBuilder灵活切换规划器(OMPL vs. Pilz)
MoveIt 2规划器切换实战:用MoveItConfigsBuilder实现OMPL与Pilz工业规划器的动态选择 在工业机器人应用开发中,运动规划器的选择往往决定了任务执行的效率和质量。想象一下这样的场景:你的机械臂需要在杂乱环境中快速避障移动时,…...
Android开发职位深度解析与面试指南
引言 Android开发作为移动应用开发的核心领域,近年来随着智能手机的普及和技术的迭代,已成为IT行业的热门职业方向。本文基于一份典型的Android开发职位描述展开,深入探讨其核心技能要求、经验门槛、工具使用等关键要素。职位描述强调了对Flutter、多线程、Framework、Andr…...
