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

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

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

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

⭐使用 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} }注意 静态成…

基于神经网络的股票K线数据预测未来涨幅

本文介绍了一种基于全连接神经网络&#xff08;Fully Connected Network, FCN&#xff09;的股票K线数据预测策略。具体步骤包括数据预处理、模型构建与训练、以及模型的验证和预测。 数据预处理 数据预处理是时间序列预测中的关键步骤。我们从历史K线数据中提取特征并生成标…

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…

Web前端不挂科:深入探索与实战指南

Web前端不挂科&#xff1a;深入探索与实战指南 在数字化时代的浪潮中&#xff0c;Web前端开发已成为一项炙手可热的技能。然而&#xff0c;对于许多初学者来说&#xff0c;如何避免在Web前端课程中挂科却成为了一道难题。本文将从四个方面、五个方面、六个方面和七个方面&…

6_1 Linux 用户管理

6_1 Linux 用户管理 文章目录 6_1 Linux 用户管理[toc]1. 用户管理2. 组账户3. 本地账户数据文件4. 用户账号创建与删除5. 设置密码6. 用户初始配置文件7. 组账户管理8. 总结 1. 用户管理 用户管理的作用&#xff1a;可以登入操作系统&#xff1b;不同的用户有不同的权限唯一标…

设备安装施工的一点总结

下工厂安装了几百台设备&#xff0c;总结一点经验。 信号强度造成设备不稳定 设备是使用物联网卡的联网设备&#xff0c;以前一直用的是单天线&#xff08;虽然设计上可以接四根天线&#xff09;&#xff0c;没发现什么问题&#xff0c;但是这一批硬件设计有改动&#xff0c;稳…

PyTorch 开发环境快速安装

PyTorch 开发环境快速安装包含三大步骤&#xff0c;具体如下&#xff1a; Anaconda 图文安装教程链接 # 安装时会自带 Python conda info # 使用该命令在终端验证是否安装成功CUDA 图文安装教程链接 nvcc -v # 使用该命令在终端验证是否安装成功PycharmPyTorch 图…

双指针数组问题

删除有序数组中的重复项 重点在于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;客服下载即可…

堆排序要点和难点以及具体案例应用

堆排序(Heap Sort)是一种基于堆数据结构的排序算法。下面我将以分点表示和归纳的方式,结合相关数字和信息,详细描述堆排序的PTA(Programming and Testing Approach,编程与测试方法)。 1. 堆排序原理 堆排序是一种树形选择排序,利用了完全二叉树的性质,通过构建最大堆…

【数据结构(邓俊辉)学习笔记】图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;则称…

(delphi11最新学习资料) Object Pascal 学习笔记---第14章泛型第2节(泛型类型实例化)

14.2.3 泛型类型实例化 ​ 请注意&#xff0c;这是一个相当高级的一节内容&#xff0c;重点关注泛型的一些内部细节及其潜在的优化。如果这是您第一次学习泛型&#xff0c;那么建议您多读一遍。 ​ 除了一些优化之外&#xff0c;每次实例化泛型类型时&#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…