【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>
相关推荐
骚饼1 分钟前
Git 命令配置别名、Git命令缩写(Mac版)
前端·git
LoveEate12 分钟前
vue3 el-switch表单联动校验
前端·javascript·vue.js
z_y_j22997043817 分钟前
服务器中更新前端项目
服务器·前端
2301_7976042423 分钟前
d40: vue杂项问题
前端·javascript·vue.js
Mintopia1 小时前
领域适配 AIGC:垂直行业 Web 应用的微调技术实践
前端·javascript·aigc
Mintopia1 小时前
Next.js 内置后端能力扩展 —— 重定向与路由保护
前端·javascript·next.js
IT_陈寒1 小时前
Python 3.12 性能暴增50%!这5个新特性让老项目直接起飞
前端·人工智能·后端
excel1 小时前
JavaScript 中的对象池:复用对象的高效方案
前端
excel1 小时前
Vue实例挂载的过程中发生了什么
前端
琹箐2 小时前
Aupload + vuedraggable实现 上传的文件可以拖拽排序
前端·vue.js