uni-app iOS的nvue页面阻止事件冒泡不生效

uni-app iOS的nvue页面阻止事件冒泡不生效

开发环境 版本号 项目创建方式
Mac 11.6 HBuilderX 
### 示例代码：


```html
<cover-view v-if="changeSrcShow" [@click](/user/click).stop="" class="pop-box">
<div class="pop-header">
<text class="text-header">选择清晰度</text>
</div>
<div class="pop-item" v-for="(item,index) in srcList" :key="'srcList'+index" [@click](/user/click).stop="choosSrc($event, item)">
<text :class="srcText==item.title ? 'text2' : 'text1'">{{item.title}}</text>
</div>
</cover-view>

操作步骤：

视频播放页面选择片段、选择清洗度等的点击事件

预期结果：

只触发一层点击事件

实际结果：

触发多层点击事件

bug描述：

iOS的nvue页面阻止事件冒泡@click.stop=""不生效


更多关于uni-app iOS的nvue页面阻止事件冒泡不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

提供一个完整的示例方便排查

更多关于uni-app iOS的nvue页面阻止事件冒泡不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


事例项目已上传

您好，重新上传了一份简单的事例

事例项目已上传

其他组件上是否生效？

text可以生效

我上传了一份简单的事例 maopao.nvue_.zip，您可以看下

单个文件的事例

stopclick(event) { console.log(‘event’, event); event.stopPropagation(); //iOS这里不起作用，依然会冒泡触发屏幕点击事件，controls会显示/隐藏 }

感谢反馈，问题已确认，下个版本会修复此问题

nvue 长按阻止事件冒泡无效，请问一下怎么处理呢

回复 [已删除]: 解决了吗

HX 3.2.13 已修复此问题

在 iOS 的 nvue 页面中，@click.stop 确实存在事件冒泡处理不一致的问题，这通常与 nvue 的原生渲染机制有关。根据你的代码和描述，可以尝试以下解决方案：

  1. 使用 [@tap](/user/tap) 替代 @click：在 nvue 中，[@tap](/user/tap) 是更推荐的事件绑定方式，它更符合原生手势处理逻辑。将 @click.stop 改为 [@tap](/user/tap).stop 可能会解决冒泡问题。

  2. 检查事件绑定层级：确保事件绑定在正确的元素上。在 nvue 中，某些容器组件（如 cover-view）的事件处理可能与预期不符，可以尝试将事件绑定到内层元素（如 pop-item 的 text 元素）。

  3. 使用 stopPropagation 方法：在事件处理函数中，通过 $event.stopPropagation() 显式阻止冒泡。例如：

    <div [@tap](/user/tap)="handleTap($event)">

    handleTap(e) {
  e.stopPropagation();
  // 其他逻辑
}
回到顶部