vue从建立到完整的饿了么（19）阻止事件冒泡

说明

1.上一章--购物车详细信息的展现与删除
2.苍渡大神源码--项目源码地址
3.数据接口--API接口地址
4.UI框架--Mint UI

开始

1.目前的购物车效果

2.能够看到，点击背景，购物车并不会消失，如今我们来写点击事件。
由于购物车的显示与否是data中的carinfo控制的，因此我们的点击事件直接让carinfo为false便可

<transition name="opacity">
          <div @click="carinfo=false" v-if="carinfo&&mycar.length>=1" class="car">
                          <div class="carmain flex2">
                              <div class="cartop padlr10 ih50">
                                    <span>购物车</span>
                                    <span @click="mycar=[]" class="right"><icon class="w15 mgr5 y2" name="delete"></icon>清空</span>
                              </div>
                              <div class="carmainbox flex1">
                                  <div v-for="item in mycar" class="carbox after padlr10 bgfff ih50">
                                        <span class="bold col666">{{item.shop.specfoods[0].name}}</span>
                                        <span class="right">
                                            <span class="colred mgr5">￥{{item.shop.specfoods[0].price*item.num}}</span>
                                            <span @click="item.num=item.num-1"><icon class="addicon y4" name="offline"></icon></span>
                                            <span class="ih20 inblock">{{item.num}}</span>
                                            <span @click="item.num=item.num+1" class=""><icon name="add" class="addicon y4"></icon></span>
                                        </span>
                                  </div>
                              </div>
                          </div>
          </div>
    </transition>

结果以下

？？？能够看到点击商品的加减号，购物车竟然也隐藏了！！！这明显并非我们想要的。
这是由于购物车内部的点击事件也出触发了父元素的点击事件，因此咱们阻止事件冒泡便可

这里有两种方法，一种是购物车内部的点击事件传入$event参数，这是dom对象，使用js原生的方法阻止。

但我们用vue封装的方法，很是简单，在购物车内部的点击事件@click改成@click.stop便可

<transition name="opacity">
          <div @click="carinfo=false" v-if="carinfo&&mycar.length>=1" class="car">
                          <div class="carmain flex2">
                              <div class="cartop padlr10 ih50">
                                    <span>购物车</span>
                                    <span @click="mycar=[]" class="right"><icon class="w15 mgr5 y2" name="delete"></icon>清空</span>
                              </div>
                              <div class="carmainbox flex1">
                                  <div v-for="item in mycar" class="carbox after padlr10 bgfff ih50">
                                        <span class="bold col666">{{item.shop.specfoods[0].name}}</span>
                                        <span class="right">
                                            <span class="colred mgr5">￥{{item.shop.specfoods[0].price*item.num}}</span>
                                            <span @click.stop="item.num=item.num-1"><icon class="addicon y4" name="offline"></icon></span>
                                            <span class="ih20 inblock">{{item.num}}</span>
                                            <span @click.stop="item.num=item.num+1" class=""><icon name="add" class="addicon y4"></icon></span>
                                        </span>
                                  </div>
                              </div>
                          </div>
          </div>
    </transition>

结果以下

解决！