【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>
相关推荐
超级罗伯特3 分钟前
大屏自适应,响应式布局,亲测有效
前端·javascript·html·大屏·驾驶舱
青衫码上行3 分钟前
【Java Web学习 | 第九篇】JavaScript(3) 数组+函数
java·开发语言·前端·javascript·学习
前端老宋Running4 分钟前
React组件命名为什么用小写开头会无法运行?
前端·react.js·面试
百***07185 分钟前
WebSpoon9.0(KETTLE的WEB版本)编译 + tomcatdocker部署 + 远程调试教程
前端
ruanCat6 分钟前
对 changelogen 和 changelogithub 使用的思考
前端·github
前端Hardy11 分钟前
HTML&CSS&JS:赛博木鱼
前端·javascript·css
有点笨的蛋19 分钟前
从值拷贝到深拷贝:彻底弄懂 JavaScript 的堆与栈
前端·javascript
BBB努力学习程序设计21 分钟前
CSS3选项卡:纯CSS实现优雅的内容切换
前端·html
有点笨的蛋21 分钟前
从零掌握 Ajax:一次请求带你读懂异步数据加载原理
前端·javascript·ajax
进击的野人24 分钟前
JavaScript日期操作与DOM节点管理:构建动态网页的核心技术
前端·javascript