html5页面移动端点击按钮出现弹出框并且出现全屏遮罩层时 禁止页面滑动，适配安卓和ios

---

多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)

---

之前小柚子写了一个项目，没有用任何的UI组件库，所以当遇到了一个点击上传按钮时需要出现弹框并出现蒙层禁止滑动时遇到了一点点的小问题。本来小柚子是这样写的

 

var mo = function(e) {
    e.preventDefault()
};

document.body.addEventListener('touchstart', function() {})

$("#submit").click(function() {//点击上传按钮
    $(".mongolia").css("display", "block")//蒙层显示
    $(".eject").css("display", "block")//弹框显示
    $("body").css("overflow", "hidden")//body溢出隐藏
    document.addEventListener("touchmove", mo, false); //禁止页面滑动
})

点击弹出框取消按钮隐藏蒙层，隐藏弹框，解除禁止滑动的效果
$("#cancel").click(function() {
    $(".mongolia").css("display", "none")
    $(".eject").css("display", "none")
    $("body").css("overflow", "scroll")
})

 

嗯，写完之后，小柚子发现确实也是可以的，功能都实现了，就去忙其他的去了。但其实不是，也是在后期测试时才发现的，因为我使用的安卓的手机测试的，上面的代码对安卓也生效了，但是我一个同事用ios的系统一测试，问题就出来了，他并不兼容ios的，所以后期小柚子又问了很多人，查了很多资料才解决了这个问题，代码奉上，希望能帮助到一些人

 

var mo = function(e) {
    e.preventDefault()
};

document.body.addEventListener('touchstart', function() {})

$("#submit").click(function() {
    $(".mongolia").css("display", "block")
    $(".eject").css("display", "block")
    $("body").css("overflow", "hidden")
    document.addEventListener("touchmove", mo, {
        passive: false
    }); //禁止页面滑动
})

点击弹出框取消按钮隐藏蒙层，隐藏弹框，解除禁止滑动的效果
$("#cancel").click(function() {
    $(".mongolia").css("display", "none")
        $(".eject").css("display", "none")
    $("body").css("overflow", "scroll")
    document.addEventListener("touchmove", mo, {
        passive: false
    });
})

注：关键点在于passive: false，参数名passive是不能省略的