微信小程序之冒泡事件

最新推荐文章于 2024-06-09 14:26:11 发布
最新推荐文章于 2024-06-09 14:26:11 发布
阅读量2.9k 收藏
点赞数
分类专栏： 微信小程序开发记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010513497/article/details/104960988
版权

文章目录


官方文档

事件：一个简单的理解就是用户与页面交互，常见的比如点击事件

文档中提到，事件分为冒泡事件和非冒泡事件（在Android中就是点击事件传递）

事件分为冒泡事件和非冒泡事件：

  1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
  2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

官方文档列出了冒泡事件列表：
在这里插入图片描述
并且告诉我们除上表外的都是非冒泡事件
在这里插入图片描述
我们可能常用的冒泡事件就是bind，非冒泡事件就是catch了
在这里插入图片描述

微信小程序--------原生组件、事件对象（绑定、冒泡、捕获）
weixin_44775723的博客
09-03 1892
一、原生组件 小程序中的部分组件是由客户端创建的原生组件，包含： ①camera—相机 ②canvas—画布 ③input（仅在focus时表现为原生组件） ④map—地图 ⑤textarea—多行输入框 ⑥video—视频 二、事件冒泡 <view id="parent" bindtap="fj"> <view id="child" bindtap="zj"><...
《微信小程序-基础篇》小程序中的事件与冒泡
Oliver尹的博客
07-03 3706
本文难度属于：初级，适合 初学小程序的开发者，通过本文，你可以了解到 小程序中的事件是什么，如何 执行事件 以及 当事件冒泡时有什么具体应用
微信小程序冒泡事件
weixin_30555515的博客
06-03 398
问题描述：在做收货地址的时候，一开始给红色边框绑定了一个点击事件，跳转到下单页，给蓝色区域绑定一个点击跳转编辑页，但是当点击编辑的时候，匆匆跳到编辑页就立马闪退到下单页 问题原因：冒泡事件引起的 解决方法，把蓝色区域的bindtab绑定事件，替换成catchtab，因为子元素用bindtap绑定事件后，执行的时候，会冒泡到父元素（触发父亲元素上绑定的bindtap事件）如果不想冒泡到父元素...
小程序冒泡事件
丑小鸭立志变天鹅的博客
08-10 402
小程序绑定事件 bind绑定：不会阻止冒泡事件 <view bindtap="fatherClick"> <text bindtap="childClick">冒泡事件</text> </view> fatherClick(){ console.log('father') } childClick(){ console.log('child') } 点击冒泡事件，依次触发childClick（）、fatherClick（）；结果为先后输出 child
微信小程序中的冒泡事件
奋斗的小绿萝
07-23 6351
背景 一、概念 首先引用百度百科解释下什么是事件冒泡。 所谓事件冒泡，就是指当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码...
微信小程序bindtap事件与冒泡阻止详解
10-16
为了阻止事件冒泡，微信小程序提供了`catchtap`事件。将`bindtap`替换为`catchtap`，可以确保事件只在当前组件中处理，不会继续向上冒泡。如下所示： ```html outer middle <view bindtap='handinner'>inner ...
微信小程序冒泡事件及其阻止方法实例分析
12-02
本文实例讲述了微信小程序冒泡事件及其阻止方法。分享给大家供大家参考，具体如下： 事件的类别分为几种： 点击事件：tap 长按事件：longtap 触摸事件：touchstart； touchend；touchcancel；touchmove 其他：...
微信小程序 冒泡事件原理解析
01-03
在微信小程序的事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 WXML的冒泡事件列表： ...
【微信小程序】事件分类以及阻止事件冒泡
最新发布
云泽野の编程日记
06-09 1681
当一个组件上的事件被触发后，不仅当前组件会接收到这个事件，其父级组件也会按顺序接收到这个事件，直到事件被消耗或到达最外层。在微信小程序中，事件分为冒泡事件和非冒泡事件两大类，它们的区别在于事件是否能从原始触发组件开始，向父级组件传播（即“冒泡”）。：非冒泡事件触发时，仅当前组件会接收到该事件，不会向上传播到父组件。这类事件在触发后立即停止，不会影响到其他层级的组件。⭐使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。要想阻止事件冒泡也很简单,
微信小程序开发系列（十五）·bind 绑定的事件（冒泡事件）、catch 绑定的事件（非冒泡事件）
时光の尘的博客
03-04 2570
当一个组件的事件被触发后，该事件不会向父节点传递，若此时父节点也有绑定事件，则不会触发父节点的事件。使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。：当一个组件的事件被触发后，该事件会向父节点传递，若此时父节点也有绑定事件，则会一并触发。
微信小程序 冒泡问题
Bi-Hu的博客
09-18 205
可以阻止冒泡事件的发生，其实很简单，直接把bindtap改为catchtap即可。 有些组件 例如 view 就可以在属性上直接设置阻止冒泡 已测试！！！！ 组件也可以用用，甚至如果穿事件出来，事件也可以用 catch绑定! ...
WeChat小程序学习心得——冒泡事件
qq_31040997的博客
11-14 504
在index.wxml下生成3个view view11 view22 view33 并用bindtap为其绑定点击事件（以view11为例） 在index.js中编写绑定事件的方法体，并传入event参数（以view1为例） view1click: function(event) { console.log("view1click")
【微信小程序】冒泡事件与非冒泡事件、将文章数据从业务中分离、wxml的模块化
颜颜yan_的博客
11-29 1035
哈喽大家好，本期是微信小程序专栏第十四期。上期我们实现了从welcome页面跳转到page页面，本期我们先对上期内容进行一个补充知识点，也就是冒泡事件与非冒泡事件的定义。本期主要实现的功能是将page.js中的文章数据分离到一个单独的js中，即将文章数据从业务中分离，通过这一功能的实现学习wxml的模块与模块化等知识点。注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
微信小程序 笔记 （杂）
射手男很懒的博客
12-19 214
微信小程序  笔记 （杂）   刚入小程序不久，写写笔记。     事件分类 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 WXML的冒泡事件列表： 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove...
【微信小程序开发】深入探索事件绑定、事件冒泡、页面跳转的逻辑实现
热门推荐
景天科技苑
05-14 1万+
事件绑定指的是某些按钮，或者某些组件，在我们点击的时候，能够触发事件执行。 当子标签和父标签/祖籍标签绑定了相同的事件后，当子标签事件触发，会继而触发父级标签/祖籍标签的事件。 点击儿子标签会触发父级标签\祖父标签..等等的所有点击事件,这叫事件冒泡。
【2023.11.15已更新：微信小程序/Vue】解决事件冒泡问题（连续跳转页面问题）
weixin_62645763的博客
11-14 1533
在微信小程序或Vue中，解决事件冒泡问题（连续跳转页面问题），文章也包括阻止默认行为的方法
微信小程序入门与实战之路由函数与事件冒泡
Lbsssss的博客
10-01 579
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。可以用load和unload来验证他们的区别。
小程序学习心得之事件冒泡
qq_22182279的博客
10-30 446
1 catchtap和bindtap bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。2 在swiper组件中实现跳转，可以通过在swiper绑定catchtap事件，通过event.target.dataset.postid获取点击图片对应id3 target 和currentTarget target指的是当前点击的组件 和currentTarg
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
weixin_32886135的博客
01-17 516
bindtap就是点击事件在.wxml文件绑定:cilck here在一个组件的属性上添加bindtap并赋予一个值(一个函数名)当点击该组件时, 会触发相应的函数执行在后台.js文件中定义tapMessage函数://index.jsPage({data: {mo: 'Hello World!!',userid : '1234',},// 定义函数tapMessage: function(eve...
微信小程序 阻止冒泡
08-19
要去掉微信小程序输入框下面的线，你可以在对应的样式文件中进行设置。可以尝试以下几种方法： 1. 使用自定义样式覆盖默认样式：在对应页面的 `.wxss` 样式文件中添加以下代码： ``` .input-class::after { border...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值