uniapp如何阻止事件冒泡

在uniapp中，点击子元素时会触发父元素的点击事件，请问如何阻止这种事件冒泡？比如在嵌套的view组件中，点击内层view不希望触发外层view的绑定事件。尝试过使用@tap.stop但没效果，正确的处理方法是什么？需要兼容小程序和H5平台。

2 回复

在uniapp中，使用@事件.stop阻止冒泡。例如：

<view @tap.stop="handleTap">点击我</view>

或通过事件对象：

handleTap(e) {
  e.stopPropagation()
}

推荐第一种方式，更简洁。


在 UniApp 中，阻止事件冒泡可以通过以下方法实现：

  1. 使用 @事件.stop 修饰符
    在模板中绑定事件时，添加 .stop 修饰符，例如：

    <view [@tap](/user/tap).stop="handleTap">点击我（不会冒泡）</view>

    这样点击事件不会向上级元素冒泡。

  2. 在事件处理函数中调用 event.stopPropagation()
    如果需要在方法中动态控制，可以在事件对象上调用此方法：

    handleTap(event) {
  event.stopPropagation(); // 阻止事件冒泡
  // 其他逻辑
}

注意事项：

  • UniApp 基于 Vue.js，因此事件处理遵循 Vue 的规范。
  • 仅对支持冒泡的事件（如 tap、touchstart）有效。
  • 如果事件是原生组件（如 video）触发的，可能需检查组件文档。

使用 .stop 修饰符更简洁，推荐在模板中直接使用。

回到顶部