vue用click产生了点击穿透事件

项目里面，点击图片，然后调用一个组件。让图片全屏展示，然后点击全屏，组件消失。按理说我没有tap.不会存在点击穿透事件。但是在全屏的时候，下面的其他事件也会触发。

然后分析是因为组件消失太快，然后click事件还在往下传递的原因。所以我让弹窗消失，延迟200毫秒，就解决了问题。

大概代码如下：

// 父组件
<template>
<!-- 全屏图片 -->
    <FullPic
      :isFull="isFull"
      @hideFullFn="hideFullFn"
      :slideTo="slideTo"
      :fullPicList="fullPicList"
      @touchmove.prevent
    />
</template>

<script>
import FullPic from "../components/detail/full-swiper";
export default {
  name: "listDetail",
  components: {
    FullPic
  },
  data() {
    return {
      isFull: false, // 是否全屏展示图片
      fullPicList: [], // 全屏图片列表
      slideTo: 0, //全屏第几张图片显示
      }
  }，
  hideFullFn() {
      // 添加延时
      setTimeout(() => {
        this.isFull = false;
        this.fullPicList = [];
      }, 200);
    }
}

//子组件
<template>
  <div>
    <swiper
      class="full-container"
      :options="swiperOption2"
      ref="mySwiper2"
      v-if="isFull"
      @click="hideFullFn"      
    >
      <swiper-slide v-for="slide in fullPicList" :key="slide">
        <img class="_wiper_pic2" :src="slide">
      </swiper-slide>
      <div class="swiper-pagination2" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
var preD = function(e) {
  e.preventDefault();
};
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "fullPic",
  props: ["isFull", "fullPicList", "slideTo"],
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiper2() {
      return this.$refs.mySwiper2.swiper;
    }
  },
  watch: {
    isFull(flag) {
      if (flag) {
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", preD, { passive: false }); //禁止页面滑动
        var i = this.slideTo ? this.slideTo : 0;
        this.swiper2.slideTo(i, 10, false);
      } else {
        document.body.style.overflow = ""; //出现滚动条
        document.removeEventListener("touchmove", preD, { passive: false });
      }
    }
  },
  data() {
    return {
      swiperOption2: {
        pagination: {
          el: ".swiper-pagination2",
          type: "fraction"
        }
      }
    };
  },
  methods: {
    hideFullFn() {
      this.$emit("hideFullFn");
    }
  }
};
</script>
<style lang="scss" scoped>
.full-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 50%;
    object-fit: contain;
    transform: translateY(-50%);
  }
  .swiper-pagination2 {
    position: absolute;
    left: auto;
    right: 22px;
    bottom: 60px;
    padding: 5px 5px;
    width: 72px;
    border-radius: 20px;
    background: rgba(153, 155, 164, 0.5);
    font-size: 22px;
    text-align: center;
    color: #fff;
    box-sizing: content-box;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }
}
</style>