uni-app .stop 无法阻止父视图点击事件

uni-app .stop 无法阻止父视图点击事件

测试过的手机：

  • iPhone 11
  • 小米

操作步骤：

  • 随意事件

预期结果：

  • 点击不触发父视图

实际结果：

  • 点击触发父视图

bug描述：

  • .stop 失效。点击子视图会触发父视图事件

相关链接：


### 表格
| 信息项         | 内容                     |
|----------------|--------------------------|
| 产品分类       | uniapp/App               |
| PC开发环境     | Mac                      |
| PC版本号       | 11.0.1                   |
| HBuilderX类型  | 正式                     |
| HBuilderX版本  | 3.1.18                   |
| 手机系统       | 全部                     |
| 手机厂商       | 华为                     |
| 页面类型       | nvue                     |
| 打包方式       | 离线                     |
| 项目创建方式   | HBuilderX                |

更多关于uni-app .stop 无法阻止父视图点击事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

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

更多关于uni-app .stop 无法阻止父视图点击事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，.stop 修饰符在某些情况下确实可能无法阻止父视图的点击事件冒泡。这通常与 nvue 的渲染机制和事件处理方式有关。

原因分析：

  1. nvue 使用原生渲染，事件系统与 Vue 的 Web 事件模型存在差异。
  2. 某些组件（如 view）在 nvue 中的事件冒泡行为可能不受 .stop 完全控制。
  3. 不同厂商的 Android 系统或 iOS 版本对事件拦截的实现可能存在兼容性问题。

解决方案：

  1. 使用 [@tap](/user/tap) 替代 @click：在 nvue 中，[@tap](/user/tap) 事件通常比 @click 更可靠，配合 .stop 使用：
    <view [@tap](/user/tap)="childTap">
  <view [@tap](/user/tap).stop="childTap"></view>
</view>
  2. 手动阻止冒泡：在事件处理函数中调用 event.stopPropagation()：
    methods: {
  childTap(event) {
    event.stopPropagation()
    // 其他逻辑
  }
}
回到顶部