uni-app 阻止时间冒泡

@click.stop  阻止事件冒泡

<template>
    <view>
        <view class="content" @click="contentClick">
            <view class="box" @click.stop="boxClick"></view>
        </view>            
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        methods: {
            contentClick:function(){
                uni.showToast({
                    title:'父级盒子',
                    icon:'none'
                })
            },
            boxClick:function(){
                uni.showToast({
                    title:'子级盒子',
                    icon:'none'
                })
            }
        }
    }
</script>

<style>
    .content{width: 500rpx;height: 500rpx;background: #007AFF;}
    .box{width: 200rpx;height: 200rpx;background: #4CD964;}
</style>

 

posted @ 2021-10-19 16:30  smile_Lu  阅读(483)  评论(0)    收藏  举报