【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>
相关推荐
SuperEugene7 小时前
Vue3 + Element Plus 表格实战:批量操作、行内编辑、跨页选中逻辑统一|表单与表格规范篇
开发语言·前端·javascript
极梦网络无忧8 小时前
基于 Vite + Vue3 的组件自动注册功能
前端·javascript·vue.js
Predestination王瀞潞8 小时前
5.4.3 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web) 协议架构(分层)
前端·网络·网络协议·架构·www
爱学习的程序媛8 小时前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
zabr8 小时前
花了 100+ 篇笔记,我整理出 了一套 AI Agent 工程完全指南
前端·后端·agent
软弹8 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
YaHuiLiang8 小时前
Ai Coding浪潮下的前端:“AI在左,裁员在右”
前端
雪碧聊技术8 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建
爱学习的程序媛8 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
han_8 小时前
JavaScript设计模式(二):策略模式实现与应用
前端·javascript·设计模式