【Uniapp,Vue】阻止父元素事件覆盖子元素事件

有个需求,点击一个元素,让弹出框显示,点击弹出框以外的区域,就关闭弹出框,如下代码所示。

但是这样有个问题,就是当弹出框显示以后,点击弹出框的区域也会触发父元素的点击事件,使得ifshow=false

html 复制代码
<view @click="ifshow=false">
	<view @click="ifshow=true">
		点击显示弹出框
	</view>
	<view v-if="ifshow">
		弹出框
	</view>
</view>

解决方法: 在子组件事件加个修饰stop,就会相互隔绝父子事件

html 复制代码
<view @click="ifshow=false">
	<view @click.stop="ifshow=true">
		点击显示弹出框
	</view>
	<view v-if="ifshow">
		弹出框
	</view>
</view>
相关推荐
菜鸟冲锋号39 分钟前
问题:增量关联(实时同步新数据) 这个场景中,如果hudi_pay 变更了一条数据,hudi_order_pay_join 结果的数据会跟着变化吗
服务器·前端·数据库
贩卖黄昏的熊42 分钟前
typescript 快速入门
开发语言·前端·javascript·typescript·ecmascript·es6
拾柒SHY1 小时前
XSS-Labs靶场通关
前端·web安全·xss
前端婴幼儿1 小时前
前端主题切换效果
前端
一 乐1 小时前
水果销售|基于springboot + vue水果商城系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端
Qin_jiangshan1 小时前
如何成为前端架构师
前端
dolt021 小时前
基于deepseek实现的ai问答小程序
前端·开源
一只小bit2 小时前
Qt 快速开始:安装配置并创建简单标签展示
开发语言·前端·c++·qt·cpp
加蓓努力我先飞2 小时前
a-第一部分-基础篇-前端面试题总结
前端
青莲8432 小时前
Android Jetpack - 3 LiveData
android·前端