微信小程序------阻止冒泡方法

最新推荐文章于 2025-04-27 16:17:41 发布
原创 最新推荐文章于 2025-04-27 16:17:41 发布 · 504 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

方法：将bindtap改为catchtap即可

例子：

未阻止冒泡原代码

阻止冒泡新代码

 

 

微信小程序阻止事件冒泡【看这里】
江拥羡橙的博客
10-30 6万+
uniapp、微信小程序阻止事件冒泡
微信小程序---事件处理
m0_56769104的博客
07-09 1466
在小程序中，可以通过事件传参的方式，将数据传递给事件处理函数。常见的事件包括点击事件、输入事件等。在组件节点中可以通过data-的方式传递一些自定义数据，传递的数据可以通过事件对象的方式进行获取📌注意事项​ 使用data-方法传递参数的时候，多个单词由连字符连接​ 连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符​ 例如：​，最终会呈现为​，最终会呈现为在 wxml 文件中，使用data-*属性将数据传递给事件处理函数。
【微信小程序】事件分类以及阻止事件冒泡
云泽野の编程日记
06-09 2114
当一个组件上的事件被触发后，不仅当前组件会接收到这个事件，其父级组件也会按顺序接收到这个事件，直到事件被消耗或到达最外层。在微信小程序中，事件分为冒泡事件和非冒泡事件两大类，它们的区别在于事件是否能从原始触发组件开始，向父级组件传播（即“冒泡”）。：非冒泡事件触发时，仅当前组件会接收到该事件，不会向上传播到父组件。这类事件在触发后立即停止，不会影响到其他层级的组件。⭐使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。要想阻止事件冒泡也很简单,
微信小程序阻止事件冒泡
weixin_68658847的博客
12-06 562
微信小程序阻止事件冒泡
微信小程序阻止冒泡事件
我是小鹏呀的博客
03-23 1127
使用catchtap后，点击goClick事件就不会触发detailClick事件。解决方法：阻止冒泡事件：将点击事件bindtap换成catchtap。点击需求，但是问题出现在点击下面的按钮时也会触发跳转详情页。需求：点击整个卡片可以跳转详情页，点击按钮，实现。
在微信小程序中怎样阻止冒泡事件？
weixin_44266024的博客
01-18 9310
在微信小程序当中，当两个包含的视图都使用了bindtap函数来绑定点击事件的话，就会发生冒泡事件（即点击内部事件时将同时触发外部事件），如果我们要想阻止冒泡事件的发生，将被包含在内部的bindtap该为catchtap即可，下面请看具体事例。
微信小程序 rich-text的使用方法
08-29
在微信小程序中，`<rich-text>`组件是一个用于渲染富文本的组件，...总之，`<rich-text>`组件是微信小程序中处理富文本内容的重要工具，通过理解和熟练运用其属性和规则，可以创建出丰富多样的页面布局和内容展示效果。
微信小程序-页面开发
陆卿之的博客
01-02 4250
页面开发
微信小程序-入门指南
唯见青山不见君
10-23 1907
微信小程序-入门指南
微信小程序web-view的那些事（持续更新）
q1003675852的博客
04-03 1944
本文主要记录微信小程序web-view的一些注意事项
微信小程序自定义组件阻止click事件冒泡
Zq
04-27 819
微信小程序阻止事件冒泡。不是死板的catch:tap
微信小程序——事件分类和阻止事件冒泡
zluih的博客
10-25 1552
使用bind绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用catch来绑定事件。：当一个组件的事件被触发后，改事件不会向父节点传递。：当一个组件的事件被触发后，改事件会向父节点传递。事件分类和阻止事件冒泡。冒泡事件，非冒泡事件。
阻止冒泡/穿透-微信小程序(vant weapp)
m0_68428581的博客
07-25 1863
（1）问题：点击“立即报名”，先弹出一个dialog弹窗，取消就关闭弹窗，确认跳转另一页面，此时点击取消、确认按钮就开始跳转混乱（2）解决办法
微信小程序 笔记 （杂）
射手男很懒的博客
12-19 251
微信小程序  笔记 （杂）   刚入小程序不久，写写笔记。     事件分类 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 WXML的冒泡事件列表： 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove...
微信小程序-阻止事件冒泡
xwc999
11-01 269
阻止事件冒泡 只需要在父级标签加上catchtab=“事件名称”，就行了 防止微信报警告信息
微信小程序 -- 防止事件冒泡
Emily
08-07 8405
事件分为冒泡事件和非冒泡事件： 1）冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 2）非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 1. 在javaScript中，防止事件冒泡的方式 阻止事件冒泡（在子级加）： 1) return false --加在相应方法最后一行 2) e.stopPropagation() --加在相应方法第一行 2. ...
小程序事件系统 —— 32 事件系统 - 事件分类以及阻止事件冒泡
然后就去远行
03-07 1218
如果想实现点击子组件按钮的时候，只触发子组件的事件，父组件的事件不触发，则需要阻止子组件的事件冒泡；冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递；（如果父节点中也绑定了一个事件，父节点事件也会被触发，也就是说子组件的事件和父组件的事件都会被触发）；非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递；（如果父节点绑定了事件，父节点的事件不会被触发，只有组件本身的事件会触发）；在微信小程序中，事件分为。
微信小程序-view
最新发布
05-30
### 微信小程序中 `view` 组件的使用说明 在微信小程序开发中，`view` 是一个非常重要的视图容器组件[^2]。它类似于 HTML 中的 `div` 标签，用于承载其他子组件或内容，并可以通过设置属性来实现丰富的交互效果和样式控制。 以下是关于 `view` 组件的一些关键点： #### 1. 基本用法 `view` 组件可以嵌套其他组件或文本内容。以下是一个简单的示例： ```html <view class="container"> 这是一个 view 容器 </view> ``` #### 2. 属性介绍 `view` 组件支持多种属性，用于定义其行为和外观。以下是一些常用的属性： - **`hover-class`** 当用户点击 `view` 组件时，会应用指定的样式类。如果需要禁用点击反馈，可以将该属性值设置为 `none`。 ```html <view class="box" hover-class="boxhover">点击我</view> ``` 在对应的 `.wxss` 文件中定义样式： ```css .box { background-color: orange; padding: 10px; } .boxhover { background-color: pink; } ``` - **`hover-start-time` 和 `hover-stay-time`** 控制点击反馈的延迟时间和持续时间（单位为毫秒）。例如： ```html <view class="box" hover-class="boxhover" hover-start-time="50" hover-stay-time="200">点击我</view> ``` - **`hover-stop-propagation`** 如果设置为 `true`，则阻止点击事件向父元素冒泡。例如： ```html <view class="outer" hover-class="outerhover"> 外层 <view class="inner" hover-class="innerhover" hover-stop-propagation>内层</view> </view> ``` #### 3. 样式与布局 通过结合 CSS 样式，可以灵活地调整 `view` 的布局和外观。例如，使用 Flexbox 布局实现水平或垂直排列： ```html <view class="flex-container"> <view class="item">项目 1</view> <view class="item">项目 2</view> <view class="item">项目 3</view> </view> ``` 对应的样式文件： ```css .flex-container { display: flex; justify-content: space-around; } .item { background-color: lightblue; padding: 10px; text-align: center; } ``` #### 4. 注意事项 - `view` 组件本身不具有任何默认样式，开发者需要通过 `class` 或内联样式来定义其外观[^2]。 - 在绑定事件时，需要注意事件冒泡的行为，必要时可以通过 `catch` 或 `stopPropagation` 来控制。 --- ### 示例代码 以下是一个综合示例，展示如何使用 `view` 组件及其属性： ```html <view class="container"> <view class="header" hover-class="header-hover" hover-start-time="50" hover-stay-time="200"> 点击我试试 </view> <view class="content"> <view class="item">项目 1</view> <view class="item">项目 2</view> <view class="item">项目 3</view> </view> </view> ``` 对应的样式文件： ```css .container { padding: 20px; background-color: #f9f9f9; } .header { background-color: orange; padding: 10px; text-align: center; } .header-hover { background-color: pink; } .item { margin: 5px 0; padding: 10px; background-color: lightblue; text-align: center; } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值