uni-app Android 端nvue页面点击事件穿透问题，冒泡事件未被阻止

uni-app Android 端nvue页面点击事件穿透问题，冒泡事件未被阻止

操作步骤：

  • nvue 页面，点击view里面的button，或者其他标签绑定的事件

预期结果：

  • 只触发点击到的标签绑定的事件

实际结果：

  • 既触发了点击标签的事件，又触发了父标签绑定的事件，其实就是事件冒泡了

bug描述：

  • nvue页面中 @click.stop 不能阻止冒泡事件，父标签view有一个点击事件，里面的一个子标签button也有一个点击事件，点击button绑定的事件会冒泡到父标签的事件上，实际就是触发了两个事件了

相关链接：

开发环境 版本号 项目创建方式
Mac 10.15.5 (19F101) HBuilderX
3.1.9
Android Android 10
小米 MIX 3

更多关于uni-app Android 端nvue页面点击事件穿透问题，冒泡事件未被阻止的实战教程也可以访问 https://www.itying.com/category-93-b0.html

21 回复

Android 端nvue页面点击事件穿透问题,修复了吗？我map地图上，弹框touch事件，下层地图移动。。。

更多关于uni-app Android 端nvue页面点击事件穿透问题，冒泡事件未被阻止的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题已确认，后续修复，先使用 event.stopPropagation() 已加分，感谢您的反馈！

还没修复？

还没修复吗？

还没修复吗？

还没修复吗？

还没修复吗?

还没修复吗?2024年1月3日, PM 02:09:43

也遇到了这个问题

【报Bug】app-nvue事件修饰符.stop无效

点击空白区域也穿透到下面一层页面的点击事件了

还没修复吗

我在nuve中同样遇到了，都这么久了还没修复呀！

同问，我也是

2023年7月26日

21年报的bug,23年还没修,都快24年了,真牛

24年了,这个bug还没修复

都快25年了 还是存在穿透问题

还没修复吗？

我的是nvue 绑定的一些事件@click 点击无效， 第一次偶尔有效果， 再点击触发交互重新绘制这个nvue界面时候（比如view有一些v-if控制）， 之后@click 绑定的事件就失效了， 怎么点击都无效果；不会触发；死机一样的；

在 uni-app 的 nvue 页面中，事件冒泡机制与普通 vue 页面有所不同。nvue 基于原生渲染，其事件系统不完全遵循 Web 标准，因此 @click.stop 可能无法有效阻止事件冒泡。

解决方案：

  1. 使用 [@tap](/user/tap) 替代 @click：nvue 中推荐使用 [@tap](/user/tap) 事件，它更符合移动端交互习惯，且支持事件修饰符。
  2. 通过逻辑判断阻止冒泡：在子组件事件处理函数中调用 event.stopPropagation()（若支持），或在父组件事件中通过条件判断避免重复触发。
  3. 检查事件绑定层级：确保没有嵌套元素的事件监听器意外触发，必要时调整结构或使用透明遮罩隔离点击区域。

示例代码：

<view [@tap](/user/tap)="handleParentTap">
  <button [@tap](/user/tap).stop="handleButtonTap">按钮</button>
</view>
回到顶部