vue事件冒泡问题

Question

点击黑色区域，选项卡和黑色遮罩消失，现在我点击选项卡区域也触发了函数，我的理解是事件冒泡造成的，但是事件触发函数是写在黑色遮罩div上的，加.stop不起作用，着么解决？

 <section class="block" v-show="isShow" @click="handleBlock">
            <div class="signList">
                <h3>请您选择团队中一位医生作为主要签约对象</h3>
                <ul>
                    <li class="docList" v-for="item in proDoc">
                        <div class="avatar"><img :src="filePath+item.headImg" alt=""></div>
                        <div class="name">{{item.name}}</div>
                        <div class="proName" :class="{'leader':item.isLeader==1}">{{item.hospitalProName}}</div>
                        <div class="publicPrivate">
                            <label><input type="radio" name="abc" :data-id="item.id"><i>✓</i></label>

                        </div>
                    </li>

                </ul>
                <div class="ensure" @click="applyToDoc">确定</div>

Answer 1

在signList上加上@click.stop试试

<div class="signList" @click.stop>

Answer 2

判断 event.target 是否和 event.currentTarget 一致，不一致说明是冒泡上来的，就不执行。