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

亦凉 2021-09-18 01:12 595阅读 0赞

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

首先我们要明白 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是被阻止，点击没有作用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

代码如下：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210812/4ff5fc2dc3d74f2fa8f01d4113a5ce73.png