[Uniapp, Vue] Prevent parent element events from overriding child element events

There is a requirement. Click an element to display the pop-up box, and click an area outside the pop-up box to close the pop-up box, as shown in the following code.
But there is a problem with this, that is, when the pop-up box is displayed, clicking the area of ​​the pop-up box will also trigger the click event of the parent element, makingifshow=false

<view @click="ifshow=false">
	<view @click="ifshow=true">
		点击显示弹出框
	</view>
	<view v-if="ifshow">
		弹出框
	</view>
</view>

insert image description here

Solution: Add a modification to the subcomponent event stop, and the parent and child events will be isolated from each other

<view @click="ifshow=false">
	<view @click.stop="ifshow=true">
		点击显示弹出框
	</view>
	<view v-if="ifshow">
		弹出框
	</view>
</view>

insert image description here

Guess you like

Origin blog.csdn.net/SingDanceRapBall/article/details/131867926