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

最新推荐文章于 2025-08-15 09:50:45 发布

转载最新推荐文章于 2025-08-15 09:50:45 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011503045

文章标签：

#javascript #ui #ViewUI

本文介绍如何在Vue项目中解决购物车组件点击穿透的问题，通过阻止事件冒泡实现只关闭背景点击的效果，并保持商品操作按钮的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

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>

结果如下
图片描述

解决！