uni-app uni-tag组件事件无法阻止冒泡

uni-app uni-tag组件事件无法阻止冒泡

示例代码：

<uni-tag text="点击确认"  type="primary" @click.native.stop="confirm" />

操作步骤：

  • 写代码运行

预期结果：

  • 不报错，且能阻止事件冒泡

实际结果：

  • 报错了，事件直接绑定失败

bug描述：

@click.stop在uni-tag组件上使用会报错，无法阻止冒泡。@click.native.stop也试了，一样的效果


| 开发环境          | 版本号   | 项目创建方式 |
|-------------------|----------|--------------|
| Windows           | 10       | HBuilderX    |
| HBuilderX         | 3.4.7    |              |
| Chrome            | 100.0.4896.75 |             |

更多关于uni-app uni-tag组件事件无法阻止冒泡的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我也遇到了，如何解决？

更多关于uni-app uni-tag组件事件无法阻止冒泡的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，uni-tag 组件默认是没有提供直接阻止事件冒泡的属性的。如果你想要阻止事件冒泡，可以通过以下几种方式来实现：

1. 使用 @tap.stop 或 @click.stop

如果你是在处理点击事件，可以使用 @tap.stop 或 @click.stop 来阻止事件冒泡。

<uni-tag @tap.stop="handleTagClick">标签</uni-tag>

methods: {
  handleTagClick() {
    console.log('标签被点击了');
  }
}

2. 使用 event.stopPropagation()

如果你在事件处理函数中，可以通过调用 event.stopPropagation() 来手动阻止事件冒泡。

<uni-tag @tap="handleTagClick">标签</uni-tag>

methods: {
  handleTagClick(event) {
    event.stopPropagation();
    console.log('标签被点击了');
  }
}

3. 使用 catch 事件

在 uni-app 中，catch 事件可以阻止事件冒泡。你可以使用 catchtap 或 catchclick 来阻止事件冒泡。

<uni-tag catchtap="handleTagClick">标签</uni-tag>

methods: {
  handleTagClick() {
    console.log('标签被点击了');
  }
}

4. 使用 capture 事件

如果你想要在捕获阶段处理事件并阻止冒泡，可以使用 capture-bind 或 capture-catch。

<uni-tag capture-catch:tap="handleTagClick">标签</uni-tag>

methods: {
  handleTagClick() {
    console.log('标签被点击了');
  }
}

5. 使用 stop 修饰符

如果你使用的是 vue，可以在事件处理函数中使用 stop 修饰符来阻止事件冒泡。

<uni-tag @tap.stop="handleTagClick">标签</uni-tag>

methods: {
  handleTagClick() {
    console.log('标签被点击了');
  }
}
回到顶部