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>

結果以下

解決！