小程序-点击事件上绑定点击事件同时触发（事件冒泡）

最新推荐文章于 2025-07-09 09:13:44 发布
原创 最新推荐文章于 2025-07-09 09:13:44 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

本文解决了小程序中常见的点击事件冒泡问题，介绍了一种有效的方法：通过使用catchtap代替bindtap来阻止事件冒泡，确保了内层组件点击事件的独立性。

问题：小程序中点击事件的冒泡问题

解决办法：阻止小程序中点击事件的冒泡问题，如果外层view的点击事件是bindtap

那么内层组件的点击事件用catchtap就解决啦！

比心❤

 

JavaScript事件也可以冒泡泡(Bubble)
Hemx的博客
03-06 2127
事件的冒泡（Bubble） 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&gt...
微信小程序 （事件对象---绑定、冒泡、捕获）
weixin_45343878的博客
09-03 632
原生组件 小程序中的部分组件是由客户端创建的原生组件，包含： camera 相机 canvas 画布 input（仅在focus时表现为原生组件） 输入框 map 地图 textarea 多行输入框 video 视频 事件冒泡 事件触发验证： 点击父元素红色区域时，只会触发父级绑定的事件 点击子元素橙色区域 currentTarget和target有区别 ...
小程序冒泡事件
丑小鸭立志变天鹅的博客
08-10 434
小程序绑定事件 bind绑定：不会阻止冒泡事件 <view bindtap="fatherClick"> <text bindtap="childClick">冒泡事件</text> </view> fatherClick(){ console.log('father') } childClick(){ console.log('child') } 点击冒泡事件，依次触发childClick（）、fatherClick（）；结果为先后输出 child
微信小程序之冒泡事件
snoto的专栏
03-19 3034
文章目录 官方文档 事件：一个简单的理解就是用户与页面交互，常见的比如点击事件 文档中提到，事件分为冒泡事件和非冒泡事件（在Android中就是点击事件传递） 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 官方文档列出了冒泡事件列表： 并且告诉我们除上表外的都是非冒泡事件 我们...
微信小程序交互精髓：点击操作与状态管理实战
最新发布
2201_75786273的博客
07-09 772
点击交互是小程序用户体验的基础，掌握事件绑定、状态管理和样式切换的核心原理，能让你应对各种复杂场景。记住 "数据驱动视图" 的核心思想，通过修改数据而非直接操作 DOM 来实现交互效果，这是小程序开发的最佳实践。
小程序的点击事件
qq_42244911的博客
05-31 4352
点击inner, 执行的是handinner和handmiddle两个函数，因为midd的catchtap阻止了事件冒泡行为，所以outer不会执行。解决这个问题: 借助了css3中的一个非常好用的特性 在指定的类上添加一个。
《微信小程序-基础篇》小程序中的事件与冒泡
Oliver尹的博客
07-03 3844
本文难度属于：初级，适合 初学小程序的开发者，通过本文，你可以了解到 小程序中的事件是什么，如何 执行事件 以及 当事件冒泡时有什么具体应用
微信小程序bindtap事件与冒泡阻止详解
10-16
在微信小程序中，`bindtap`事件是用于处理用户点击事件的关键组件，它允许开发者在用户与页面元素交互时执行特定的逻辑。`bindtap`通常在`.wxml`文件中与具体的元素（如`<text>`、`<view>`等）绑定，并在`.js`文件中...
微信小程序双击事件，事件冒泡,bangtap,catchtap事件绑定
03-29
key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡，catch...
微信小程序 页面跳转事件绑定的实例详解
08-29
微信小程序页面跳转事件绑定是小程序开发中非常重要的一部分，本文将详细介绍微信小程序页面跳转事件绑定的实例详解，包括事件的定义、事件分类、事件绑定等知识点。 事件是什么？ 事件是视图层到逻辑层的通讯方式...
微信小程序---事件处理
m0_56769104的博客
07-09 1411
在小程序中，可以通过事件传参的方式，将数据传递给事件处理函数。常见的事件包括点击事件、输入事件等。在组件节点中可以通过data-的方式传递一些自定义数据，传递的数据可以通过事件对象的方式进行获取📌注意事项​ 使用data-方法传递参数的时候，多个单词由连字符连接​ 连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符​ 例如：​，最终会呈现为​，最终会呈现为在 wxml 文件中，使用data-*属性将数据传递给事件处理函数。
小程序学习心得之事件冒泡
qq_22182279的博客
10-30 472
1 catchtap和bindtap bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。2 在swiper组件中实现跳转，可以通过在swiper绑定catchtap事件，通过event.target.dataset.postid获取点击图片对应id3 target 和currentTarget target指的是当前点击的组件 和currentTarg
JS中点击事件冒泡解析
06-26 348
关于Javascript中的点击事件冒泡的问题，很多初学者都处理不好。 什么是点击事件冒泡？ 例： 今天我去小明家找他玩。正好小明、小明的爸爸、小明的爷爷在客厅一起看电视。 我对小明说：”咱们出去玩吧“。 小明十分乐意的回答到：”好啊“。 小明的爸爸听到后，说到：”把作业写完后在出去玩“。 小明的爷爷也发话了：”预报有雷阵雨，就别出去玩了“。 我本来只是询问一下小明的意见...
【2023.11.15已更新：微信小程序/Vue】解决事件冒泡问题（连续跳转页面问题）
weixin_62645763的博客
11-14 1835
在微信小程序或Vue中，解决事件冒泡问题（连续跳转页面问题），文章也包括阻止默认行为的方法
【小程序教程】微信小程序的事件处理和交互逻辑（tap logpress touchmove input submint事件&冒泡与捕捉最详细讲解）
10-31 3013
事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因：提升用户体验：良好的事件处理和交互逻辑可以使小程序更加易用和友好，提升用户体验。通过合理设置事件触发条件和交互效果，可以使用户操作更加顺畅和自然。增加功能和互动性：事件处理可以实现用户与小程序之间的交互，例如点击按钮、滑动页面、输入表单等。通过事件处理，开发者可以为小程序增加各种功能和互动性，满足用户的需求。数据交互和更新：事件处理可以与后台数据进行交互，实现数据的获取、更新和展示。
微信小程序长按和点击同时存在时，2个都会触发的问题
qq_37170740的博客
03-11 1302
问题描述： 在列表上实现长按弹框删除，点击进入详情页。在模拟器上正常，但在手机端，长按同时会触发点击。 长按、点击触发顺序： 点击：touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap 点击和长按的差别：按住时间在350ms内算点击 最终代码： wxml： <view "bindlongtap="longclick" ...
阻止小程序冒泡
曹焱的博客
04-18 1256
1.直接用方法 ：catchtouchmove="preventD" &lt;view class="selector-bj {{isTapSelector ? '' : 'is-focus-selector' }}" wx:if="{{selectorBj}}" bindtap='tapSeleBj' catchtouchmove="preventD"&gt;&lt;/view&gt;  
微信小程序阻止事件冒泡
weixin_68658847的博客
12-06 463
微信小程序阻止事件冒泡
【微信小程序开发】深入探索事件绑定、事件冒泡、页面跳转的逻辑实现
热门推荐
景天科技苑
05-14 1万+
事件绑定指的是某些按钮，或者某些组件，在我们点击的时候，能够触发事件执行。 当子标签和父标签/祖籍标签绑定了相同的事件后，当子标签事件触发，会继而触发父级标签/祖籍标签的事件。 点击儿子标签会触发父级标签\祖父标签..等等的所有点击事件,这叫事件冒泡。
小程序 冒泡点击事件
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、付费专栏及课程。

余额充值