问题描述

直接上代码

<div class="post"  @click="postdetail">
    <!--头像、名称区-->
    <div class="avatar_name">
        <div class="avatar"  >
            <img src="../assets/images/cat_1.jpg" alt="avatar"  @click="personalpage" />
        </div>
</div>

子盒子是这个猫猫头像，父盒子是外面的一大层，父盒子和子盒子都有点击事件。 如果按照上面的代码运行，点击头像后会先触发子盒子的事件，再触发父盒子的事件。

但是我只想触发子盒子的事件不想触发父盒子的事件。

解决方案

<div class="post"  @click="postdetail">
    <!--头像、名称区-->
    <div class="avatar_name">
        <div class="avatar"  >
            <img src="../assets/images/cat_1.jpg" alt="avatar"  @click.stop="personalpage" />
        </div>
</div>

给子盒子的点击函数改成@click.stop即可