层叠组件 click事件的处理

需求背景：
点击绿色框，要跳转到Anthony这个客户的详情页面。
点击右上角开关，将这Anthony放入disabled列表里。

问题是，当我把click事件放在绿色div层，开关按钮的点击事件会失效。

image.png

问题分析，绿框里的点击事件都被div的click 事件监听并消费了。 导致开关事件的监听无效。
解决办法(方法很多，这里只说一种)，将绿框和开关置于同一级层，这样他们的点击事件就是独立的。利用相对位置，来处理他们的位置问题，让他们看起来是嵌套的。

<div @click.stop.prevent="routerTo(progressBoard)" style="position:relative">
    <div>
         <h4>Anthony Hazard</h4> 其余省略
    </div>
</div>
<el-switch
                style="position: absolute; top:0; right:7%"
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949">
</el-switch>

而如果将开关换成button，就没这么复杂, button嵌套在div里。只要阻止按钮的点击事件冒泡即可，这里放比较完整的代码，可以感受下冒泡层级。

<div class="progress-detail d-flex" @click.stop.prevent="routerTo(progressBoard)" >
      <div class="d-flex flex-wrap ">
          <div class="col-12 d-flex px-md-0 justify-content-between">
                <h4 class="mb-0">
                      {{progressBoard.name}}
                </h4>
                <el-button @click.stop="test">cancel</el-button>
          </div>
       </div>
</div>