uni-app nvue页面ios环境下event.stopPropagation()不生效，安卓正常

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app nvue页面ios环境下event.stopPropagation()不生效，安卓正常

操作步骤：

需求是短剧播放到vip剧情就弹出蒙层提示信息，目前是nvue页面cover-view标签在video上面盖了层蒙层使用event.stopPropagation()阻止事件穿透，但是ios无法拦截，手指双击屏幕视频就自动播放了，事件照样穿透蒙层，安卓手机正常，苹果目前有问题

预期结果：

希望ios环境能跟安卓环境一样可以阻止事件穿透，

实际结果：

需求是短剧播放到vip剧情就弹出蒙层提示信息，目前是nvue页面cover-view标签在video上面盖了层蒙层使用event.stopPropagation()阻止事件穿透，但是ios无法拦截，手指双击屏幕视频就自动播放了，事件照样穿透蒙层，安卓手机正常，苹果目前有问题

bug描述：

需求是短剧播放到vip剧情就弹出蒙层提示信息，目前是nvue页面cover-view标签在video上面盖了层蒙层使用event.stopPropagation()阻止事件穿透，但是ios无法拦截，手指双击屏幕视频就自动播放了，事件照样穿透蒙层，安卓手机正常，苹果目前有问题

相关图片

Image 1 Image 2 Image 3

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 Windows 10
HBuilderX类型 正式
HBuilderX版本 4.29
手机系统 iOS
手机系统版本 iOS 16
手机厂商 苹果
手机机型 苹果11promax
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Harmonyos Next教程
1 回复

在uni-app中，nvue页面主要用于原生渲染，这在iOS和Android平台上可能会表现出一些差异。针对你提到的event.stopPropagation()在iOS环境下不生效的问题，这通常与nvue的原生组件事件处理机制有关。虽然无法直接提供一个确保在所有情况下都能解决问题的通用代码，但我可以分享一些可能帮助你调试和解决问题的思路和代码示例。

1. 确认事件冒泡机制

首先，确保你理解事件冒泡机制，并检查你的事件监听器是否正确设置。在nvue中，你可能需要更精细地控制事件传播。

<template>
  <div @click="outerClick">
    Outer
    <div @click.stop="innerClick">Inner</div>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('Outer clicked');
    },
    innerClick(event) {
      console.log('Inner clicked');
      // 使用.stop修饰符阻止事件冒泡
      // 在nvue中，如果.stop不生效，尝试手动阻止
      // event.stopPropagation(); // 这在nvue中可能不起作用
    }
  }
}
</script>

注意：在nvue中，.stop修饰符的行为可能与H5不同，如果它不工作，你可能需要寻找其他方法。

2. 使用自定义逻辑控制事件传播

如果event.stopPropagation()在iOS上确实不生效，你可以考虑通过自定义逻辑来控制事件的传播。例如，设置一个标志位来标识事件是否应该被处理。

<template>
  <div @click="handleClick('outer')">
    Outer
    <div @click="handleClick('inner')">Inner</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shouldPropagate: true
    };
  },
  methods: {
    handleClick(source) {
      if (source === 'inner' && !this.shouldPropagate) {
        return;
      }
      console.log(source + ' clicked');
      if (source === 'inner') {
        this.shouldPropagate = false;
        setTimeout(() => {
          this.shouldPropagate = true; // 延迟恢复，模拟事件处理完毕
        }, 0);
      }
    }
  }
}
</script>

3. 调试和测试

在iOS设备或模拟器上彻底测试你的应用，确保事件处理逻辑按预期工作。由于nvue的原生渲染特性，某些行为可能与H5页面不同，因此仔细调试是必要的。

结论

由于nvue页面的原生渲染特性，event.stopPropagation()在iOS上可能不如预期那样工作。通过理解事件冒泡机制、使用自定义逻辑控制事件传播，并在真实设备上进行彻底测试，你可以找到适合你的应用的解决方案。如果问题依旧存在，考虑查阅uni-app的官方文档或社区论坛，看看是否有其他开发者遇到并解决了类似的问题。

回到顶部