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>
点击子元素时不改变父元素的样式: