小程序学习心得之事件冒泡

最新推荐文章于 2025-06-26 21:58:39 发布

错爱谁

最新推荐文章于 2025-06-26 21:58:39 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_22182279/article/details/78398317

小程序专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了在小程序中使用swiper组件时如何通过bindtap和catchtap进行事件绑定，并解释了两者之间的区别。bindtap允许事件冒泡，而catchtap则阻止冒泡。此外，还介绍了如何利用这些事件实现页面跳转及获取点击元素的相关信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 catchtap和bindtap
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

2 在swiper组件中实现跳转，可以通过在swiper绑定catchtap事件，通过event.target.dataset.postid获取点击图片对应id

3 target 和currentTarget
target指的是当前点击的组件和currentTarget 指的是事件捕获的组件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

错爱谁

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

探索程序人生，从学习成长到创新实验的进阶之路

AI天才研究院

05-26

938

在当今数字化时代，编程已经成为推动科技进步和社会发展的重要力量。对于每一位程序员来说，从最初的学习入门到不断成长，再到进行创新实验，是一个充满挑战和机遇的过程。本文的目的在于为广大程序员和编程爱好者提供一个全面的进阶指南，涵盖从基础学习到高级创新的各个方面，帮助读者清晰地了解在程序人生的不同阶段需要掌握的知识和技能，以及如何逐步实现进阶。范围包括编程的核心概念、算法原理、数学模型、项目实战、应用场景、工具资源等多个领域。

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

云泽野の编程日记

06-09

2033

当一个组件上的事件被触发后，不仅当前组件会接收到这个事件，其父级组件也会按顺序接收到这个事件，直到事件被消耗或到达最外层。在微信小程序中，事件分为冒泡事件和非冒泡事件两大类，它们的区别在于事件是否能从原始触发组件开始，向父级组件传播（即“冒泡”）。：非冒泡事件触发时，仅当前组件会接收到该事件，不会向上传播到父组件。这类事件在触发后立即停止，不会影响到其他层级的组件。⭐使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。要想阻止事件冒泡也很简单,

参与评论您还未登录，请先登录后发表或查看评论

小程序冒泡事件

丑小鸭立志变天鹅的博客

08-10

431

小程序绑定事件 bind绑定：不会阻止冒泡事件 <view bindtap="fatherClick"> <text bindtap="childClick">冒泡事件</text> </view> fatherClick(){ console.log('father') } childClick(){ console.log('child') } 点击冒泡事件，依次触发childClick（）、fatherClick（）；结果为先后输出 child

关于uniapp开发阻止事件冒泡问题

最新发布

u014642921的博客

06-26

526

【代码】关于uniapp开发阻止事件冒泡问题。

WeChat小程序学习心得——冒泡事件

qq_31040997的博客

11-14

542

在index.wxml下生成3个view view11 view22 view33 并用bindtap为其绑定点击事件（以view11为例）在index.js中编写绑定事件的方法体，并传入event参数（以view1为例） view1click: function(event) { console.log("view1click")

《微信小程序-基础篇》小程序中的事件与冒泡

Oliver尹的博客

07-03

3837

本文难度属于：初级，适合初学小程序的开发者，通过本文，你可以了解到 小程序中的事件是什么，如何执行事件以及当事件冒泡时有什么具体应用

微信小程序之冒泡事件

snoto的专栏

03-19

3028

文章目录官方文档事件：一个简单的理解就是用户与页面交互，常见的比如点击事件文档中提到，事件分为冒泡事件和非冒泡事件（在Android中就是点击事件传递）事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。官方文档列出了冒泡事件列表：并且告诉我们除上表外的都是非冒泡事件我们...

冒泡排序保姆级心得分享

Shuyujian01的博客

07-07

1123

前言:这是一篇新手向的算法思路分享，分享我对冒泡排序的一些想法。解决基础算法的三个大思路 1.了解算法的目的 2.分析算法的过程 3.将伪程序语言转换成自己对应的编程语言 1.这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端（升序或降序排列），就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名“冒泡排序”。 .........

微信小程序快速入门个人学习心得（四）

zcylxzyh的博客

01-21

373

TODOS案例这个案例是要做一个任务清单。首先思考一共分为几块内容： 1、输入框 2、任务列表 3、工具栏因此一共三块，在对应wxml文件中，父容器中添加三个子容器。 <view class="container"> <view class="searchHandle"></view> <view class="worksHandle"></view> <view class="utilsHandle"></view&gt

c语言冒泡排序项目总结,C语言冒泡排序法心得

weixin_34487462的博客

05-25

838

记得以前在大学里学习c语言的时候,刚开始是很吃力的.入门级别的算法中有个叫冒泡排序法,也有称为气泡排序法.那时候刚接触它就对它的名字特别感兴趣,因为觉得很有意思.好了,废话不多说了,我们先一起简单回忆下这个冒泡排序法.一.打印行和列一般是这样的一个简单代码,输出4行4列*:for(int i = 1,i < 5,i++){for(int j = 1,j < 5,j++){printf(...

微信小程序总结总结心得

Matildan的博客

08-15

7367

昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. - app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量. - app.json 这个文件可以对小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab等. - app.wxss 是小程序的公共样式表.(为了适应广大的前端开发者，我们

微信小程序学习心得1.docx

06-12

微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx微信小程序学习心得1.docx

小程序学习心得

weixin_45785466的博客

02-23

398

现在微信小程序越来越火了，与刚开始相比也新增了许多新的功能。这里主要讲一下我整理的小程序的文件架构和相关小知识。 小程序框架： pages index.js ->这里是页面的js逻辑 index.json ->这里是相关的数据文档 index.wxml ->相当于html文件 index.wxss ->相当于css文件 index app.js ->公共文档js ap...

小程序学习心得体会

YBWarmYoung的博客

04-02

2429

我们写小程序时都要跳转页面的，也会有底部导航来进行切换这个时候就要介绍下窗口是怎样配置的要在app.json文件里写一个tabBer对象里面在定义一个list数组里面放我们定义的几个需要切换的页面如下最多list里面可以定义5个对象在微信小程序里我们创建文件挺简单的如下图比如说就在上面图片的最下面直接写pages/文件名/文件名然后保存就行了这样文件夹就创建成功了然后我再说下小程序的文件类型 小程序的文件类型分别有四种第一种：js文件这个home.js里面写的是我们从ht

微信小程序篇】三. 微信小程序的事件

TheNew_One的博客

01-06

866

事件项目准备创建项目demo3，操作步骤同demo2 1. 事件的类别 tap 手指触摸后马上离开触摸事件 touchstart 手指触摸动作开始 touchend 手指触摸动作结束 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗持续触摸事件 longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代...

微信小程序冒泡事件

weixin_30555515的博客

06-03

432

问题描述：在做收货地址的时候，一开始给红色边框绑定了一个点击事件，跳转到下单页，给蓝色区域绑定一个点击跳转编辑页，但是当点击编辑的时候，匆匆跳到编辑页就立马闪退到下单页问题原因：冒泡事件引起的解决方法，把蓝色区域的bindtab绑定事件，替换成catchtab，因为子元素用bindtap绑定事件后，执行的时候，会冒泡到父元素（触发父亲元素上绑定的bindtap事件）如果不想冒泡到父元素...

微信小程序——学习心得一

ZhouDong0110的博客

02-26

1023

一、模板： ①定义模板 1.在内定义代码片段，使用name作为唯一标识属性，作为模板的名称；在实践操作中自己的问题在于容易忽视掉必要的{{}}括号和个别语句的架构问题，经过对语言的校对和修改慢慢可以改正错误，逐渐熟练。示例如： <template name = " chengxu" /> <view> <text>{{ index...

微信小程序开发系列（十五）·bind 绑定的事件（冒泡事件）、catch 绑定的事件（非冒泡事件）

时光の尘的博客

03-04

3167

当一个组件的事件被触发后，该事件不会向父节点传递，若此时父节点也有绑定事件，则不会触发父节点的事件。使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。：当一个组件的事件被触发后，该事件会向父节点传递，若此时父节点也有绑定事件，则会一并触发。

我的小程序学习总结

mustardzz的博客

03-19

744

我已经学习小程序将近1个月了,接下来是我对学习小程序的总结一.创建账号一开始需要进入微信开放文档小程序的注册页,然后进去填好自己的资料,就可以获得自己的小程序的账号了。可以在小程序的管理平台去管理自己的小程序,可以看见自己的AppID，AppID可以去创建自己的微信项目，而AppID是唯一的。二.第一个作业的重点 text:文本标签 button：按钮标签 image：图片标签，可以引入图片 background:(url'引入图片必须是网络地址或者是...

JS语法学习心得分享

在了解“JS学习心得”这一标题和描述之后，我们可以总结出以下几个与JavaScript学习相关的重要知识点： 1. JavaScript基本语句和语法结构： JavaScript中的基本语句是构建程序的基础。例如，声明变量使用var、let、...