uniapp阻止事件冒泡

简介: 在 UniApp 中,阻止事件冒泡的方式与普通的前端开发类似,可以使用 @click.stop 或 @tap.stop 事件修饰符来阻止事件的进一步传播。

以下是在 UniApp 中阻止事件冒泡的示例:

<template>
  <view>
    <button @click="outerClick">外部按钮</button>
    <button @click.stop="innerClick">内部按钮</button>
  </view>
</template>
<script>
export default {
  methods: {
    outerClick() {
      console.log("外部按钮被点击");
    },
    innerClick() {
      console.log("内部按钮被点击");
    }
  }
};
</script>

在上面的示例中,当点击内部按钮时,通过 @click.stop 修饰符阻止了事件冒泡,因此不会触发外部按钮的点击事件。

同样的,你也可以在其他事件上使用 stop 修饰符,比如 @touch.move.stop、@touch.start.stop 等,根据具体的事件类型来阻止事件冒泡。

需要注意的是,UniApp 中的事件修饰符和普通的 Vue.js 事件修饰符使用方法是相同的,所以你可以借鉴 Vue.js 的文档来更深入了解事件修饰符的用法。


相关文章
|
18天前
|
小程序 前端开发
阻止小程序事件冒泡的三种方法
阻止小程序事件冒泡的三种方法
470 0
|
7月前
uniapp阻止navigator冒泡
uniapp阻止navigator冒泡
62 0
uni-app事件冒泡 如何解决事件冒泡 推荐tap事件
uni-app事件冒泡 如何解决事件冒泡 推荐tap事件
|
7月前
|
小程序
微信小程序阻止事件冒泡
微信小程序阻止事件冒泡
237 0
|
7月前
|
JavaScript 前端开发 UED
什么是事件冒泡?如何阻止事件冒泡和浏览器默认事件?
什么是事件冒泡?如何阻止事件冒泡和浏览器默认事件?
123 0
|
8月前
|
人工智能 自然语言处理 小程序
小程序vant开发阻止事件冒泡
小程序vant开发阻止事件冒泡
73 0
|
10月前
|
小程序 JavaScript
微信小程序-小程序事件冒泡和事件捕获
!> 小程序当中的时间捕获与时间冒泡与原生JS的是一样的
189 0
|
10月前
|
JavaScript 前端开发
JS的冒泡和如何阻止事件冒泡
JS的冒泡和如何阻止事件冒泡
127 0
|
JavaScript 测试技术
Vue 阻止事件冒泡
Vue 阻止事件冒泡
112 0
|
JavaScript
Vue——02-06 阻止事件冒泡,阻止默认行为以及监听键盘回车事件
阻止事件冒泡,阻止默认行为以及监听键盘回车事件
303 0