【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>
相关推荐
云白冰2 分钟前
hiprint结合vue2项目实现静默打印详细使用步骤
前端·javascript·vue.js
葡萄架子10 分钟前
Python中的logger作用(from loguru import logger)
java·前端·python
Hi_MrXiao18 分钟前
前端实现图片压缩插件(image-compressorionjs)
前端
阿智@1126 分钟前
Node.js 助力前端开发:自动化操作实战
运维·前端·node.js·自动化
m0_748251721 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·vue.js·ajax
上等猿1 小时前
Ajax笔记
前端·笔记·ajax
Amo 67291 小时前
css 编写注意-1-命名约定
前端·css
程序猿online2 小时前
nvm安装使用,控制node版本
开发语言·前端·学习
web Rookie2 小时前
React 中 createContext 和 useContext 的深度应用与优化实战
前端·javascript·react.js
男孩122 小时前
react高阶组件及hooks
前端·javascript·react.js