需求背景：
点击绿色框，要跳转到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>
