HarmonyOS鸿蒙Next中【快应用】小程序转快应用如何阻止事件向上冒泡

HarmonyOS鸿蒙Next中【快应用】小程序转快应用如何阻止事件向上冒泡

问题背景： 小程序转快应用，在快应用中使用view标签包裹两层，在每层都写了一个点击事件，在点击最里面的一个button按钮的时候会触发所有view标签上绑定的点击事件，该如何处理才能只触发一个button按钮的事件呢？

相关代码：

<view class="container" bindtap="handleTap1">
  <view class="loginstyle" bindtap="handleTap2">
    <button class="btn" catchtap="handleTap3">测试</button>
  </view>
</view>

原因及解决方案： bind 事件绑定不会阻止冒泡事件向上冒泡，所以在点击最里面的一个层级后，会触发所有的事件，要想只触发对应的事件可以使用catch事件绑定来阻止向上冒泡。

相关代码：

<view class="container" bindtap="handleTap1">
  <view class="loginstyle" bindtap="handleTap2">
    <button class="btn" catchtap="handleTap3">测试</button>
  </view>
</view>

更多关于HarmonyOS鸿蒙Next中【快应用】小程序转快应用如何阻止事件向上冒泡的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中【快应用】小程序转快应用如何阻止事件向上冒泡的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，快应用开发中阻止事件冒泡可以通过在事件处理函数中调用event.stopPropagation()方法来实现。例如，在点击事件中，可以在事件处理函数内添加event.stopPropagation()，这样事件就不会继续向上冒泡到父组件。示例代码如下：

{
  handleClick(event) {
    event.stopPropagation(); // 阻止事件冒泡
    // 其他处理逻辑
  }
}
回到顶部