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 的文档来更深入了解事件修饰符的用法。


相关文章
uniapp阻止navigator冒泡
uniapp阻止navigator冒泡
250 0
uni-app事件冒泡 如何解决事件冒泡 推荐tap事件
uni-app事件冒泡 如何解决事件冒泡 推荐tap事件
|
小程序 JavaScript API
uniapp微信小程序获取用户手机号
uniapp微信小程序获取用户手机号
742 0
|
存储 JavaScript 开发工具
uniapp-实现微信授权登录
uniapp-实现微信授权登录
3056 0
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
1874 0
uniapp 如何封装uni.request请求(登录接口、业务接口)
uniapp 如何封装uni.request请求(登录接口、业务接口)
uniapp 如何封装uni.request请求(登录接口、业务接口)
|
移动开发 小程序
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
|
小程序
uni-app:网络状态监测之onNetworkStatusChange与getNetworkType的区别与应用
1、在实际项目开发中,难免涉及到监测网络,下面来具体了解下小程序两种监测网络的方法。 2、这里配置的是 uniapp,微信小程序把 uni. 换成 wx. 即可。
2196 0
uni-app:网络状态监测之onNetworkStatusChange与getNetworkType的区别与应用
|
人工智能 小程序 前端开发
【uniapp小程序】uploadFile文件上传
【uniapp小程序】uploadFile文件上传
1950 0
|
存储 小程序 JavaScript