uniapp如何阻止冒泡事件

在uniapp开发中，如何阻止事件冒泡？比如点击子元素时不想触发父元素的点击事件，尝试过@click.stop但有时不生效，有什么通用的解决方法？

2 回复

在uni-app中，使用@事件.stop阻止冒泡。例如：@click.stop="handleClick"。
或者在方法中调用event.stopPropagation()。


在 UniApp 中，阻止事件冒泡可以通过在事件处理函数中使用 event.stopPropagation() 方法实现。以下是具体方法：

  1. 在模板中绑定事件并传递事件对象：

    <template>
  <view [@tap](/user/tap)="handleTap">
    <button [@tap](/user/tap)="handleButtonTap">点击按钮</button>
  </view>
</template>

  2. 在事件处理函数中调用 stopPropagation：

    methods: {
  handleButtonTap(event) {
    event.stopPropagation(); // 阻止事件冒泡到父组件
    console.log('按钮点击，事件已阻止冒泡');
  },
  handleTap() {
    console.log('父视图点击'); // 不会触发
  }
}

注意事项：

  • 确保事件对象（如 event）被正确传递到方法中。
  • 某些 UniApp 组件（如 scroll-view）可能有默认行为，需结合 catch 事件（如 catchtap）使用。
  • 如果使用 Vue 语法，也可以使用 .stop 修饰符（部分平台支持）：
    <button [@tap](/user/tap).stop="handleButtonTap">点击按钮</button>

通过以上方法，即可有效阻止事件冒泡。

回到顶部