click和touchmove vue_vue用click产生了点击穿透事件

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

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

大概代码如下：

// 父组件

:isFull="isFull"

@hideFullFn="hideFullFn"

:slideTo="slideTo"

:fullPicList="fullPicList"

@touchmove.prevent

/>

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);

}

}

//子组件

class="full-container"

:options="swiperOption2"

ref="mySwiper2"

v-if="isFull"

@click="hideFullFn"

>

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");

}

}

};

.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);

}

}