冒泡事件与非冒泡事件（小程序）

最新推荐文章于 2025-06-16 11:12:26 发布
最新推荐文章于 2025-06-16 11:12:26 发布
阅读量379 收藏
点赞数
本文探讨了在前端开发中，不同视图组件间的事件触发机制。通过具体实例，展示了当用户点击特定视图时，如何按层级触发事件，以及这些事件如何影响父级和兄弟组件。

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

文章来自：源码在线https://www.shengli.me/wxxcx/358.html

 

 

 

 

 

效果图：

 

1.jpg

 

点击view1

 

1.jpg

点击view2会触发父元素：

 

2.png

点击view3,会触发view2，然后再触发view3

 

3.png

 

hugejihu9
关注
微信小程序（11）：冒泡事件与非冒泡事件
小R.的博客
01-10 410
事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 1. 冒泡事件： index.wxml 文件代码： <view class="out" bindtap="outTap"> <view class="inner" bindtap="innerTap"> <view class="item" bindtap="itemTap"></view&g
【微信小程序】事件分类以及阻止事件冒泡
云泽野の编程日记
06-09 2039
当一个组件上的事件被触发后，不仅当前组件会接收到这个事件，其父级组件也会按顺序接收到这个事件，直到事件被消耗或到达最外层。在微信小程序中，事件分为冒泡事件和非冒泡事件两大类，它们的区别在于事件是否能从原始触发组件开始，向父级组件传播（即“冒泡”）。：非冒泡事件触发时，仅当前组件会接收到该事件，不会向上传播到父组件。这类事件在触发后立即停止，不会影响到其他层级的组件。⭐使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。要想阻止事件冒泡也很简单,
微信小程序出现冒泡问题的原因和解决方法
最新发布
成都都成
06-16 492
微信小程序冒泡问题源于事件冒泡机制，子组件事件会向上传递给父组件。解决方法包括：1）使用catch代替bind绑定事件；2）在事件函数中调用e.stopPropagation()；3）优化组件层级和事件委托逻辑；4）区分target和currentTarget。注意特殊组件限制，合理设计事件边界，减少不必要的冒泡层级。通过合理使用事件绑定方式和组件封装，可以有效控制事件传播，避免逻辑冲突。
微信小程序之——冒泡事件和非冒泡事件
weixin_44691513的博客
02-22 875
冒泡事件和非冒泡事件 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 普通事件绑定 事件绑定的写法类似于组件的属性，如： <view bindtap="handleTap"> Click here! </view> 如果用户点击这个 view ，则页面的 handleTap 会被调用。 事件绑定函数可以是一个数据绑定，如： <view bindtap="{{
【微信小程序】冒泡事件与非冒泡事件
Titanium_S的博客
08-05 851
比如如下代码： &lt;view class="logview" bindtap="onTap"&gt; &lt;text class="logtext" bindtap="onTextTap"&gt;start&lt;/text&gt; &lt;/view&gt; 模拟器显示如下： 由于tap是冒泡事件，若点击sta
微信小程序冒泡事件和非冒泡事件
烟雨☔️任平生的博客
04-11 1512
冒泡事件和非冒泡事件其实很简单，首先通俗的了解一下冒泡的大致意思。 平时大家烧热水的过程中应该都看到过冒泡的现象，就是最底层不断冒出水泡，并且上升到水面的过程。 那么在微信小程序中： 冒泡事件：就是说事件可以向上进行传递，也就是说在事件被触发之后，会向他的父节点进行传递。 非冒泡事件：就是说事件不可以向上进行传递，也就是说在事件被触发之后，不会向他的父节点进行传递。 冒泡事件包括：touchstart，touchmove，touchcancel，touchend，tap，longtap等。 在绑定事件的时候
微信小程序bindtap事件与冒泡阻止详解
10-16
在微信小程序中，`bindtap`事件是用于处理用户点击事件的关键组件，它允许开发者在用户与页面元素交互时执行特定的逻辑。`bindtap`通常在`.wxml`文件中与具体的元素（如`<text>`、`<view>`等）绑定，并在`.js`文件中...
小程序的冒泡事件和非冒泡事件
Jana Jing的分享
01-25 1555
事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 WXML的冒泡事件列表： 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 touchend 手指触摸动作结束 tap 手指触摸后马.
微信小程序冒泡事件及其阻止方法实例分析
12-02
本文实例讲述了微信小程序冒泡事件及其阻止方法。分享给大家供大家参考，具体如下： 事件的类别分为几种： 点击事件：tap 长按事件：longtap 触摸事件：touchstart； touchend；touchcancel；touchmove 其他：...
微信小程序 冒泡事件原理解析
10-16
主要介绍了微信小程序 冒泡事件原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
小程序冒泡事件
丑小鸭立志变天鹅的博客
08-10 433
小程序绑定事件 bind绑定：不会阻止冒泡事件 <view bindtap="fatherClick"> <text bindtap="childClick">冒泡事件</text> </view> fatherClick(){ console.log('father') } childClick(){ console.log('child') } 点击冒泡事件，依次触发childClick（）、fatherClick（）；结果为先后输出 child
【微信小程序】冒泡事件与非冒泡事件、将文章数据从业务中分离、wxml的模块化
颜颜yan_的博客
11-29 1123
哈喽大家好，本期是微信小程序专栏第十四期。上期我们实现了从welcome页面跳转到page页面，本期我们先对上期内容进行一个补充知识点，也就是冒泡事件与非冒泡事件的定义。本期主要实现的功能是将page.js中的文章数据分离到一个单独的js中，即将文章数据从业务中分离，通过这一功能的实现学习wxml的模块与模块化等知识点。注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
小程序的冒泡事件与非冒泡事件
晶凌玄夜的博客
11-15 360
冒泡事件：通俗来讲就是此事件触发时可以触发父级元素的事件。就好比多米诺骨牌，推倒第一块，第一块撞到第二块，依次进行。 非冒泡事件：点击只触发自己。 下面举例： .wxml文件 <view class="view01" bindtap="func01"> <view class="view02" bindtap="func02"> <view class=...
微信小程序篇】三. 微信小程序的事件
TheNew_One的博客
01-06 866
事件 项目准备 创建项目demo3， 操作步骤同demo2 1. 事件的类别 tap 手指触摸后马上离开 触摸事件 touchstart 手指触摸动作开始 touchend 手指触摸动作结束 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 持续触摸事件 longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代...
微信小程序开发系列（十五）·bind 绑定的事件（冒泡事件）、catch 绑定的事件（非冒泡事件）
时光の尘的博客
03-04 3175
当一个组件的事件被触发后，该事件不会向父节点传递，若此时父节点也有绑定事件，则不会触发父节点的事件。使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。：当一个组件的事件被触发后，该事件会向父节点传递，若此时父节点也有绑定事件，则会一并触发。
【微信小程序】冒泡事件和非冒泡事件（2）
沛沛呀、
12-10 571
小程序中的时间分为两种，冒泡时间和非冒泡事件。例如bindtap和catchtap在事件相应上有区别： 对于bindtap而言：子元素响应时间，父元素也会跟着响应。为冒泡。 对于catchtap而言，并不冒泡，子元素响应时间父元素事件并不会触发 ...
微信小程序 冒泡事件和非冒泡事件
PrimaryColor
08-12 729
WXML的冒泡事件列表： 语法：最前面加bind关键词。 事件 说明 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替
微信小程序入门学习之事件 事件对象 冒泡非冒泡事件（1）
WBA
07-28 293
这关于事件的学习，可以自己复制到微信开发者工具上自己运行试试。 首先这里有两个文件.js 和.wxml 文件   首先给出.js文件下代码 // pages/news/news.js Page({ /** * 页面的初始数据 */ data: { msg: "我是一个msg" }, //这是一个生命周期函数 页面加载就会触发 onLoa...
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")
小程序 冒泡点击事件
02-26
### 微信小程序中的冒泡点击事件 在微信小程序中，默认情况下部分组件的事件会触发冒泡行为，而另一些则不会。对于希望利用或控制这种冒泡机制的情况，开发者可以采取特定措施来管理这些事件。 当涉及到多层嵌套组件之间的点击事件传播时，如果父级容器绑定了`bindtap`或其他形式的点击监听器，则子元素触发相应操作的同时也会向上传播至其祖先节点，除非特别指明阻止该过程的发生[^2]。 为了展示如何有效地处理并模拟一个简单的冒泡点击场景，在下面给出了一段代码片段作为实例说明： ```html <!-- WXML --> <view class="container" bindtap="handleContainerTap"> 容器区域 <button type="primary" bindtap="handleButtonTap">按钮</button> </view> ``` ```javascript // JS Page({ handleButtonTap(event){ console.log('按钮被点击'); // 不执行event.stopPropagation();允许事件继续向上冒泡 }, handleContainerTap(){ console.log('容器被点击'); } }) ``` 上述例子展示了基本的冒泡流程：当用户触碰页面内的按钮时，不仅会激活针对此按钮设置的动作处理器(`handleButtonTap`)，而且由于未调用`stopPropagation()`方法中断传递路径，因此后续还会激发所属视图区块上的响应函数(`handleContainerTap`)[^1]。 值得注意的是，并不是所有的内置组件都支持默认的冒泡特性；例如表单提交、输入框变化以及滚动条移动等均属于非冒泡类型的活动。这意味着对于这类特殊情况下的交互设计需额外留意文档指导以确保预期效果得以实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值