【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>
相关推荐
霍理迪17 分钟前
CSS文本样式
前端·css
Ashley_Amanda19 分钟前
JavaScript 中 JSON 的处理方法
前端·javascript·json
烛阴25 分钟前
C# 正则表达式(3):分组与捕获——从子串提取到命名分组
前端·正则表达式·c#
eason_fan1 小时前
从一则内存快照看iframe泄漏:活跃与Detached状态的回收差异
前端·性能优化
狗头大军之江苏分军2 小时前
年底科技大考:2025 中国前端工程师的 AI 辅助工具实战盘点
java·前端·后端
编程修仙2 小时前
第三篇 Vue路由
前端·javascript·vue.js
吴汉三2 小时前
iOS 和 HarmonyOS 兼容笔记
uni-app
比老马还六3 小时前
Bipes项目二次开发/硬件编程-设备连接(七)
前端·javascript
掘金一周3 小时前
前端一行代码生成数千页PDF,dompdf.js新增分页功能| 掘金一周 12.25
前端·javascript·后端
张就是我1065923 小时前
漏洞复现指南:利用 phpinfo() 绕过 HttpOnly Cookie 保护
前端