CSS点击事件穿透

假设盒子中有一个按钮，要实现点击按钮时透过按钮的点击事件，只触发盒子的点击事件，这个时候只需要给按钮设置如下属性即可：

button {
    /*  清除点击事件  */
    pointer-events: none;
}

uniapp测试代码如下：

<template>
    <view class="root">
        <view class="box" @click="clickBox()">
                <button @click="clickButton()">穿透按钮点击事件</button>
        </view>
    </view>
</template>
<script setup>
    function clickBox() {
        console.log('点击了box')
    }
    function clickButton() {
        console.log('点击了button')
    }
</script>
<style lang="scss" scoped>
    .root {
        .box {
            padding-top: 50px;
            height: 100px;
            background-color: green;
            button {
                /*  设置按钮点击穿透    */
                pointer-events: none;
            }
        }
    }
</style>