层叠组件 click事件的处理

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

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

image.png

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

    

         
Anthony Hazard
 其余省略
    

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

      

          

                

                      {{progressBoard.name}}
                
                cancel