微信小程序开发点击事件影响父级元素（阻止事件冒泡）

最新推荐文章于 2025-03-07 22:31:05 发布
最新推荐文章于 2025-03-07 22:31:05 发布
阅读量673 收藏
点赞数 1
文章标签： 微信小程序 notepad++ 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuicanxinghui/article/details/140734090
版权 
<button type="primary" bind:tap="click">123</button>

只需将bind改为catch就可以阻止事件冒泡，点击子元素影响父元素的问题。

<button type="primary" catch:tap="click">123</button>

与 bind 不同， catch 会阻止事件向上冒泡。

璀璨星輝
关注
微信小程序阻止自定义事件冒泡
m0_69876298的博客
12-25 231
微信小程序阻止事件冒泡，适用自定义事件当前catchtap失效
微信小程序阻止事件冒泡【看这里】
热门推荐
江拥羡橙的博客
10-30 6万+
uniapp、微信小程序阻止事件冒泡
小程序事件系统 —— 32 事件系统 - 事件分类以及阻止事件冒泡
然后就去远行
03-07 965
如果想实现点击子组件按钮的时候，只触发子组件的事件，父组件的事件不触发，则需要阻止子组件的事件冒泡；冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递；（如果父节点中也绑定了一个事件，父节点事件也会被触发，也就是说子组件的事件和父组件的事件都会被触发）；非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递；（如果父节点绑定了事件，父节点的事件不会被触发，只有组件本身的事件会触发）；在微信小程序中，事件分为。
【微信小程序】事件分类以及阻止事件冒泡
云泽野の编程日记
06-09 1980
当一个组件上的事件被触发后，不仅当前组件会接收到这个事件，其父级组件也会按顺序接收到这个事件，直到事件被消耗或到达最外层。在微信小程序中，事件分为冒泡事件和非冒泡事件两大类，它们的区别在于事件是否能从原始触发组件开始，向父级组件传播（即“冒泡”）。：非冒泡事件触发时，仅当前组件会接收到该事件，不会向上传播到父组件。这类事件在触发后立即停止，不会影响到其他层级的组件。⭐使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。要想阻止事件冒泡也很简单,
微信小程序阻止冒泡事件
我是小鹏呀的博客
03-23 1018
使用catchtap后，点击goClick事件就不会触发detailClick事件。解决方法：阻止冒泡事件：将点击事件bindtap换成catchtap。点击需求，但是问题出现在点击下面的按钮时也会触发跳转详情页。需求：点击整个卡片可以跳转详情页，点击按钮，实现。
微信小程序——事件分类和阻止事件冒泡
zluih的博客
10-25 1294
使用bind绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用catch来绑定事件。：当一个组件的事件被触发后，改事件不会向父节点传递。：当一个组件的事件被触发后，改事件会向父节点传递。事件分类和阻止事件冒泡。冒泡事件，非冒泡事件。
微信小程序——点击事件（阻止冒泡事件）
qq_43201350的博客
09-12 725
bindtap 改成 catchtap .wxml文件 <view catchtap="call">点我</view>
在微信小程序中怎样阻止冒泡事件？
weixin_44266024的博客
01-18 9123
在微信小程序当中，当两个包含的视图都使用了bindtap函数来绑定点击事件的话，就会发生冒泡事件（即点击内部事件时将同时触发外部事件），如果我们要想阻止冒泡事件的发生，将被包含在内部的bindtap该为catchtap即可，下面请看具体事例。
微信小程序开发-事件系统
iOS_HC的博客
01-23 329
1、事件传参：在触发事件时，将一些数据作为参数传递给处理事件函数的过程在组件上通过data-方式进行自定义要传递的数据，其中是自定义的属性2、若传参时，自定义属性是多个单词，单词之间用-进行连接，在事件对象中会转换为小驼峰写法，比如：data-parent-id 会转换为 parentId3、若传参时，自定义属性是多个单词，单词用小驼峰写法，在事件对象中会转换为全部小写法，比如：data-parentId 会转换为 parentid。
uniapp开发微信小程序阻止事件冒泡
weixin_45424548的博客
11-29 1785
使用uniapp开发小程序的时候，@click.stop来做事件冒泡没有作用。 查看官方给出的文档是这样写应该就可以了，但是就是没起作用，点击子组件的时候还是触发了父组件的事件。 <u-field disabled=true maxlength='9' @tap.stop="keyboard('money')" label-width='0' v-model="from.money" :placeholder="lang.InputMoney" :clearable='false'
微信小程序bindtap事件与冒泡阻止详解
11-30
bindtap就是点击事件 在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js文件中定义tapMessage函数: //index.js Page({ data: { mo: 'Hello World!!', userid : '1234', }, // 定义函数 tapMessage: function(event) { con
微信小程序冒泡事件及其阻止方法实例分析
12-02
本文实例讲述了微信小程序冒泡事件及其阻止方法。分享给大家供大家参考，具体如下： 事件的类别分为几种： 点击事件：tap 长按事件：longtap 触摸事件：touchstart； touchend；touchcancel；touchmove 其他：input；submit…. 其中前三类是冒泡事件，其他的称为非冒泡事件。 写一个简单的例子，代码就不一一贴出来了，WXML的文件如下： <view class='redview' bindtap='redclick'> 红色 <view class='yellowview' bindtap='yellowclick'> 黄
微信小程序阻止事件冒泡
weixin_68658847的博客
12-06 426
微信小程序阻止事件冒泡
微信小程序 阻止事件冒泡
这里是痞子Monkey的博客
02-21 6766
uniapp阻止事件冒泡：将子类的点击事件@click写成@click.stop 小程序阻止事件冒泡：将子类的点击事件bindtap写成cachtap
阻止冒泡/穿透-微信小程序(vant weapp)
m0_68428581的博客
07-25 1683
（1）问题：点击“立即报名”，先弹出一个dialog弹窗，取消就关闭弹窗，确认跳转另一页面，此时点击取消、确认按钮就开始跳转混乱（2）解决办法
微信小程序冒泡事件参数传递
最新发布
03-26
### 微信小程序中冒泡事件的参数传递机制 在微信小程序中，事件冒泡是一种常见的行为模式，允许子组件触发的事件沿着 DOM 树向上传递给父级组件。这种机制可以通过 `bind` 和 `catch` 关键字来控制事件的行为以及参数的传递。 #### 1. **事件冒泡的基础** 事件冒泡是指当一个子节点上的事件被触发时，该事件会依次传播到其所有的祖先节点上[^1]。如果希望某个特定事件只影响当前节点而不向上冒泡，则可以使用 `catch` 来捕获并停止事件进一步传播。 #### 2. **参数传递的方式** 在微信小程序中，事件对象通常携带了一个名为 `detail` 的属性，用于存储自定义数据。开发者可以在 WXML 中通过设置 `data-*` 属性或者直接绑定动态变量的形式，在事件发生时将这些数据作为参数传递给处理函数。 以下是具体的实现方式： - 使用 `data-*` 自定义属性： 可以在标签内添加类似于 HTML5 的 `data-*` 数据集属性，并将其赋值为字符串或其他简单类型的值。 - 动态绑定表达式： 如果需要更复杂的逻辑运算或模型驱动的数据流管理，可以直接利用 Mustache 表达式的语法 `${}` 把 JavaScript 对象成员嵌入模板之中。 #### 3. **代码示例** 下面是一个完整的例子展示如何在一个按钮点击事件中通过冒泡机制完成跨层次间的信息交换过程： ```html <!-- index.wxml --> <view bindtap="handleParentEvent"> Parent View <button catchtap="handleChildEvent" data-id="childButton">Click Me</button> </view> ``` ```javascript // index.js Page({ handleParentEvent(e) { console.log('Parent Event Triggered:', e.detail); }, handleChildEvent(e) { const id = e.currentTarget.dataset.id; this.triggerEvent('customBubble', { messageId: 'Message from child' }, {}); // 向外抛出自定义事件 // 或者手动构造 detail 并重新分发新的事件供上级监听器消费 let newDetail = Object.assign({}, e.detail, { customDataField: true }); wx.event.dispatch(this, 'bubbleUpward', newDetail); return false; // 阻断后续默认动作链路执行路径 } }); ``` 上述案例展示了两个层面的操作——子控件内部先做局部响应再主动发起新一轮带有额外负载的消息广播；与此同时由于采用了 `catchtap` 而不是普通的 `bindtap` ，所以能够有效抑制不必要的二次触碰反馈现象出现。 #### 4. **注意事项** 需要注意的是，尽管 Vue 等框架支持 `.stopPropagation()` 方法用来显式终止事件扩散链条，但在微信小程序环境下并不适用此 API 。取而代之的做法就是采用前述提到过的基于关键字区分策略(`bind vs catch`)来进行精细化调控[^2]。 另外提醒一点关于性能优化方面的小技巧：尽量减少无谓的深层结构布局设计以免造成过多冗余计算开销从而拖慢整体渲染速度。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值