uni-app view组件基础示例:阻止冒泡事件(点击子元素时不改变父元素的样式)_uni-app

hover-stop-propagation="true"和hover-stop-propagation不写true效果一样,都可以起到阻止冒泡事件的作用。

<template>
	<view class="box" hover-class="boxHover" hover-start-time="0">
		<view class="inner" hover-class="innerHover" hover-stop-propagation="true">内部元素</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss">
.box{
	width: 200px;
	height: 200px;
	background: #ccc;
}	
.boxHover{
	background: orange;
	width:300px;
	height:300px;
}
.inner{
	width: 150px;
	height: 150px;
	background: green;
}
.innerHover{
	background: greenyellow;
}
</style>

点击子元素时不改变父元素的样式:

uni-app view组件基础示例:阻止冒泡事件(点击子元素时不改变父元素的样式)_前端_02