uni-app nvue页面点击事件加上stop修饰符无效报错 不加修饰符会触发事件冒泡

在 uni-app 中使用 nvue 页面时，如果你在点击事件上使用 @tap.stop 修饰符，但发现它无效或报错，可能是因为 nvue 的事件处理机制与 vue 页面有所不同。

问题分析

1. nvue 的事件机制：nvue 是基于原生渲染的，其事件处理机制与 vue 页面不同。nvue 的事件处理是基于原生的事件系统，因此某些 vue 页面中的事件修饰符在 nvue 中可能不被支持或表现不同。

2. stop 修饰符：在 vue 页面中，@click.stop 或 @tap.stop 可以阻止事件冒泡。但在 nvue 中，stop 修饰符可能不被原生事件系统支持，导致无效或报错。

解决方案

1. 手动阻止事件冒泡：如果 stop 修饰符无效，可以尝试在事件处理函数中手动调用 event.stopPropagation() 来阻止事件冒泡。

   <template>
     <view @tap="handleTap">
       <text>Click me</text>
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       handleTap(event) {
         event.stopPropagation(); // 手动阻止事件冒泡
         console.log('Tap event triggered');
       }
     }
   }
   </script>
   

2. 使用 catch 事件：在 nvue 中，你可以使用 catch 事件来捕获事件并阻止其冒泡。catch 事件在 nvue 中是原生支持的。

   <template>
     <view @tap="handleTap" catchtap="handleCatchTap">
       <text>Click me</text>
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       handleTap() {
         console.log('Tap event triggered');
       },
       handleCatchTap() {
         console.log('Catch tap event, stop propagation');
       }
     }
   }
   </script>