解决移动端，模态框、弹框滑动滚动，底部页面随着滑动、穿透的问题

原文：https://blog.csdn.net/qq_35430000/article/details/87076146

移动端有个比较头疼的问题，就是 在模态框、弹框中滑动，底部页面也随着滑动的问题。本文将从 触摸事件、点击事件的顺序来解决这个问题。

首先我们要明白 touch 和click 的执行顺序问题：

当一个用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先处理，touch事件经过 捕获，处理, 冒泡 一系列流程处理完成后， 才回去触发click事件，click有200-300ms的延迟，自己可以打印去印证一下。

touchstart touchmove touchend touchcancel， touchcancel, click一般来说，它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel ->click . 其中touchcancel一般情况下不会触发，tocuhmove也不一定会执行，因为要有滑动的操作。

我的思路是： 在模态框mask 层，event.preventDefault() 阻止默认行为，也就阻止了 底层页面 的所有事件，模态框里面 的点击事件不再使用click，而是 使用 touchstart,因为他优先于 touchmove执行，所以不会被阻止，使用click是被阻止，点击没有作用。

 

代码如下：

<template>
<div class="content">
<p>底部内容</p>
<!-- 模态框及主要内容 -->
<div class="mask" @touchmove="noscroll" v-if="ifShowMask">
<div class="roomContent">
<div class="roomHeader">
<i class="iconfont icon-icon-test" @touchstart="closeFreeRoom"></i>
<p></p><h2>免费量房设计</h2><p></p>
</div>
<div class="form">
<div class="name">
<div class="inp-box">
<input type="text" class="inp" v-model="name" placeholder="请输入您的称呼"/>
</div>
</div>
<div class="mobile">
<div class="inp-box">
<input type="text" class="inp" v-model="mobile" placeholder="请填写手机号码，抢免费量房设计"/>
</div>
</div>
</div>
<div class="btn-main" @touchstart="submit()">立即获取</div>
<p class="sz">* 仅限深圳地区</p>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'freeRoom',
data () {
return {
ifShowMask: true,
name: '',
mobile: ''
}
},
mounted () {
},
methods: {
// 弹框禁止滑动
noscroll (event) {
event.preventDefault()
},
submit () {
console.log('提交')
},
closeFreeRoom () {
console.log('关闭蒙层')
this.ifShowMask = false
}
}
}
</script>

<style lang="less" scoped>
.content{
height: 20rem;
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
.roomContent{
width:6.7rem;
height:5.2rem;
position: fixed;
top: 22%;
left: 50%;
transform: translateX(-50%);
z-index: 201;
background: #fff;
margin:0 auto;
border-radius: 0.04rem;
.roomHeader{
display: flex;
justify-content: center;
height:1.1rem;
position: relative;
h2{
font-size: .32rem;
color:#000;
line-height: 1.1rem;
margin:0 .2rem;
}
p{
height:.55rem;
width:.6rem;
border-bottom: .02rem solid #ddd;

}
.iconfont{
font-size: 0.3rem;
position: absolute;
top: 0.3rem;
right: 0.4rem;
color: #666;
}
}
.form{
padding:0;
width:6.1rem;
margin:.4rem auto;
margin-bottom: .2rem;
margin-top: 0;
.name,.mobile{
width:100%;
height:1rem;
font-size: 0.28rem;
padding-left:0;
}
.inp{
/* padding-bottom:.2rem;*/
border:none;
background:none;
border-bottom:0.02rem solid #dddddd;
font-size:.28rem;
/* line-height:.2rem;*/
outline: none;
display:inline-block;
width:100%;
height:.6rem;
/* margin-top:.2rem;*/
border-radius: 0;
line-height: .6rem;

}
.error-tip{
/* margin-top:5px;*/
/* color:@c-high;*/
font-size:.28rem;
vertical-align: middle;
text-align: left;
}
.icon-jinggao{
margin-right:.1rem;
font-size:.28rem;
/* vertical-align:middle;*/
}
}
.btn-main{
width:6.1rem;
height:1rem;
background: #c6ae6c;
border-radius: 0.04rem;
text-align: center;
margin:0 auto;
line-height: 1rem;
color:#fff;

}
.sz{
color:#666;
font-size: .28rem;
text-align: center;
line-height: .88rem;
}
}
}
}

</style>
 
————————————————
版权声明：本文为CSDN博主「飞歌Fly」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35430000/java/article/details/87076146