多读多写多记录,多学多练多思考。----------- 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是不能省略的

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐