vue用click产生了点击穿透事件
项目里面,点击图片,然后调用一个组件。让图片全屏展示,然后点击全屏,组件消失。按理说我没有tap.不会存在点击穿透事件。但是在全屏的时候,下面的其他事件也会触发。
然后分析是因为组件消失太快,然后click事件还在往下传递的原因。所以我让弹窗消失,延迟200毫秒,就解决了问题。
【vue用click产生了点击穿透事件】大概代码如下:
// 父组件
.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);
}
}
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- JS中的各种宽高度定义及其应用
- 由浅入深理解AOP
- vue-cli|vue-cli 3.x vue.config.js 配置
- 【译】20个更有效地使用谷歌搜索的技巧
- 2020-04-07vue中Axios的封装和API接口的管理
- 涉毒患者(新诗)
- 参保人员因患病来不及到指定的医疗机构就医,能否报销医疗费用()
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决