【微信小程序】事件分类以及阻止事件冒泡

在微信小程序中,事件分为冒泡事件和非冒泡事件两大类,它们的区别在于事件是否能从原始触发组件开始,向父级组件传播(即“冒泡”)。

  • 冒泡事件:当一个组件上的事件被触发后,不仅当前组件会接收到这个事件,其父级组件也会按顺序接收到这个事件,直到事件被消耗或到达最外层。这一过程类似于水泡从水底上升到水面,故称为“冒泡”。

  • 非冒泡事件:非冒泡事件触发时,仅当前组件会接收到该事件,不会向上传播到父组件。这类事件在触发后立即停止,不会影响到其他层级的组件。

⭐使用 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>

效果:
在这里插入图片描述

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

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

相关文章

stm32编写Modbus步骤

1. modbus协议简介&#xff1a; modbus协议基于rs485总线&#xff0c;采取一主多从的形式&#xff0c;主设备轮询各从设备信息&#xff0c;从设备不主动上报。 日常使用都是RTU模式&#xff0c;协议帧格式如下所示&#xff1a; 地址 功能码 寄存器地址 读取寄存器…

【数据结构(邓俊辉)学习笔记】图05——优先级搜索

文章目录 0. 概述1. BAG2. ADT 0. 概述 学习下优先级搜索 1. BAG 优先级搜索是非常广义的&#xff0c;概况来说&#xff0c;无论DFS 还是BFS从逻辑上来都属于这种搜索。 回忆下什么叫搜索或者遍历&#xff0c;对于像图这种数据结构里的元素逐一的没有重复的也没有遗漏的对它们…

360数字安全:2024年4月勒索软件流行态势分析报告

勒索软件传播至今&#xff0c;360 反勒索服务已累计接收到数万勒索软件感染求助。随着新型勒索软件的快速蔓延&#xff0c;企业数据泄露风险不断上升&#xff0c;勒索金额在数百万到近亿美元的勒索案件不断出现。勒索软件给企业和个人带来的影响范围越来越广&#xff0c;危害性…

第一百零二节 Java面向对象设计 - Java静态内部类

Java面向对象设计 - Java静态内部类 静态成员类不是内部类 在另一个类的主体中定义的成员类可以声明为静态。 例子 以下代码声明了顶级类A和静态成员类B&#xff1a; class A {// Static member classpublic static class B {// Body for class B goes here} }注意 静态成…

python实现将excel数据指保存到word表格中

准备一个excel表格 上代码&#xff1a; import openpyxl from docx import Document# 读取Excel文件 excel_file 大学名次.xlsx wb openpyxl.load_workbook(excel_file) ws wb.active# 获取Excel文件中的所有工作表名称 sheet_names wb.sheetnames# 遍历每个工作表&#x…

ipynb转markdown的简单方法

在线转换 推荐在线转换&#xff0c;拖进去后下载就行&#xff0c;简单易操作。 Convert Jupyter notebook to GitHub-Flavored Markdown for free on AlldocsThe free text converter for all your documents.https://alldocs.app/convert-jupyter-notebook-to-markdown vsc…

双指针数组问题

删除有序数组中的重复项 重点在于p1 class Solution {public int removeDuplicates(int[] nums) {if(nums.length0) return 0;int p10,p21;while(p2<nums.length){if(nums[p2]!nums[p1]){nums[p1]nums[p2];}else p2;}return p11;} } class Solution {public void moveZeroe…

kv视频如何转码mp4格式,kv转换mp4最简单方法

在数字化时代&#xff0c;视频格式转换成为了一项日常需求。有时候我们需要把kv格式转换为MP4格式。下面将详细介绍kv转MP4的方法 方法一、 1、使用 "小白兔视频格式在线转换网站" 2、地址发给"小白兔视频格式在线转换网站"的客服&#xff0c;客服下载即可…

【数据结构(邓俊辉)学习笔记】图06——最小支撑树

文章目录 0. 概述1. 支撑树2. 最小支撑树3. 歧义性4. 蛮力算法5. Prim算法5.1 割与极短跨越边5.2 贪心迭代5.3 实例5.4 实现5.5 复杂度 0. 概述 学习下最小支撑树和prim算法。 1. 支撑树 最小的连通图是树。 连通图G的某一无环连通子图T若覆盖G中所有的顶点&#xff0c;则称…

[沉迷理论]进制链表树

往期文章推荐&#xff1a; 题解之最大子矩阵-CSDN博客 洛谷P1115最大子段和[神奇的题目]-CSDN博客 &#xff08;一条神奇的分割线&#xff09; 前言 好久没有更新的我总算在百忙之中抽出时间写了篇博客。 最近总算结束了动态规划的学习&#xff0c;真的是头昏脑涨啊。 最…

45.django - 开始建立第一个项目

1.django是什么&#xff1f; Django是一个高级的、免费的、开源的Web应用框架&#xff0c;它由Python编程语言编写而成。Django遵循模型-视图-控制器&#xff08;MVC&#xff09;的设计模式&#xff0c;但通常将其称为模型-视图-模板&#xff08;MVT&#xff09;架构。它的主要…

Silanna UV光荣推出了一款革命性的高功率远紫外线LED

这款令人瞩目的光源&#xff0c;拥有令人震撼的235nm波长&#xff0c;并被巧妙地封装在紧凑的6.8mm结构中&#xff0c;其魅力与实力兼具。 今年六月&#xff0c;在苏格兰圣安德鲁斯大学举行的盛大2024年远紫外科学和技术国际大会&#xff08;ICFUST&#xff09;上&#xff0c;S…

C# WPF入门学习主线篇(十七)—— UniformGrid布局容器

C# WPF入门学习主线篇&#xff08;十七&#xff09;—— UniformGrid布局容器 欢迎来到C# WPF入门学习系列的第十七篇。在前几篇文章中&#xff0c;我们已经探讨了 Canvas、StackPanel、WrapPanel、DockPanel 和 Grid 布局容器及其使用方法。本篇博客将介绍另一种非常实用且简单…

多目标检测模型加权框集成

优秀项目推荐&#xff1a;https://gitcode.com/ZFTurbo/Weighted-Boxes-Fusion/overview 参考链接&#xff1a; 目标检测加权框融合 WBF原理讲解 https://blog.csdn.net/YXD0514/article/details/132574588 目标检测加权框融合 WBF原理讲解&#xff08;Weighted Boxes Fusion&…

LVGL移植和图片显示

最近闲来无事&#xff0c;偶尔刷到了移植LVGL的教程&#xff0c;今天肝完了机械原理又移植完LVGL库&#xff0c;真是收获满满的一天&#xff0c;先接一杯水去。 回来了&#xff0c;发个朋友圈高级一下&#xff0c;好困。 lvgl v8.3移植及组件使用_lvgl界面编辑器-CSDN博客htt…

插卡式仪器模块:音频分析模块(插卡式)

• 24 位分辨率 • 192 KHz 采样率 • 支持多种模拟音频信号的输入/输出 应用场景 • 音频信号分析&#xff1a;幅值、频率、信噪比、THD、THDN 等指标 • 模拟音频测试&#xff1a;耳机、麦克风、扬声器测试&#xff0c;串扰测 音频分析仪 输入阻抗10 TΩ10 TΩ输入范围3…

vue如何使用slot

1. vue2 如何使用slot 1.1. 默认插槽&#xff08;Default Slot&#xff09;1.2. 具名插槽&#xff08;Named Slot&#xff09;1.3. 作用域插槽&#xff08;Scoped Slot&#xff09; 2. vue3 如何使用slot 2.1. 默认插槽&#xff08;Default Slot&#xff09;2.2. 具名插槽&…

Visual Studio 调试反汇编c++/c

目录 一、代码打断点 二、开启调试 三、调试反汇编 一、代码打断点 如下图所示&#xff1a; 二、开启调试 三、调试反汇编 代码调试成功后&#xff0c;打开窗口下的反汇编就可以查看我们的反汇编代码了。

python批量调整word含有关键字句子样式

代码&#xff1a; from docx import Document from docx.shared import RGBColor obj Document(装机必读调整样式.docx) word 软件 def set_run(run):#设置run的字体大小、是否加粗以及字体颜色run.font.size font_sizerun.bold boldrun.font.color.rgb color for p in obj.…

DP:回文串模型

一、回文子串 . - 力扣&#xff08;LeetCode&#xff09; 该题有3种解法 &#xff08;1&#xff09;中心扩展算法&#xff08;在字符串章节有介绍&#xff09;时间复杂度O&#xff08;N^2&#xff09;,空间复杂度O&#xff08;1&#xff09; &#xff08;2&#xff09;马丁车…