禁止弹窗后面body滑动

知识点：

① return false 实际上做了3件事情：
event.preventDefault(); //取消事件的默认行为
event.stopPropagation(); //阻止事件冒泡
停止回调函数执行并立即返回。

②preventDefault()  //取消事件的默认事件(事件捕捉)

<a href="http://www.baidu.com">测试</a>

$("a").click(function (e) {
    alert("默认行为被禁止喽"); 
    e.preventDefault(); //阻止跳转到链接
});

③event.stopPropagation();  //阻止事件冒泡（防止点击子级的事件触发父级的事件）

<div class="post">  
   hahhahahhaha<a href="http://baidu.com">link</a>hahahahahaha 
</div> 

$(".post").click(function () {
 console.log('11111111111')
});  

$(".post a").click(function (e) {  
  console.log('22222222')
  e.stopPropagation();  
});

==================================================

阻止滚动事件的默认事件，比如弹出弹窗阻止页面滚动

1.屏蔽页面的滚动

pc端：鼠标的滚轮和键盘的上下键（可以使页面滚动），通过取消这两个事件的默认行为来取消滚动。

window.addEventListener("wheel",function(e){
    e.preventDefault();
})
window.addEventListener("keydown",function(e){
    if(e.key == "ArrowDown" || e.key == "ArrowUp"){
        e.preventDefault();
    }
})

移动端：

当遇到遮罩层时禁止后面body页面滑动时，将body设置为position:fixed;overflow-y:hidden可以达到效果，但是会将页面滑动到最初的位置。

方法一：

//阻止页面滚动
 $("body").on("touchmove", function(e) { 
       e.preventDefault();//取消一个事件的默认行为
}, false)

//取消阻止页面滚动
$("body").off("touchmove");

这样整个body，包括弹窗里面的内容也是不可以滚动的，适合内容少的

方法二：计算window滚动的值，滚动时把值赋给window的scrollTop （会有抖动）

var tops = $(window).scrollTop();
$(window).bind("scroll",function (){
	$(window).scrollTop(tops); 
});

//关闭模态框时释放document.scroll事件
$(window).unbind("scroll");

方法三：将body设置为position:fixed;及计算window滚动的值 （推荐）

<style>	
	.fixed{
		position: fixed;
	}		
</style>	

<div class="box" style="display: none; width:200px; height: 200px; overflow-y: auto;position: fixed; left: 50%; top:50%;margin-left: -100px; margin-top: -100px; background: #fff;">
	<span>x</span>
	hhhhhhhhhhhhh<br>
	hhhhhhhhhhhhh
</div>
<span style="width：100%;height: 800px; display: block; background: pink;"></span>
<a href="javascript:;" class="btn">点击</a>	

	
var Top=null //给top变量一个初始值
$('.btn').click(function() { //点击事件弹出层显示
	$('.box').show();
	Top = $(window).scrollTop();
    $('body').css("top", -Top + "px"); //给body一个负的top值；
	$('body').addClass('fixed'); //给body增加一个类，position:fixed; 
});
$('.box span').click(function() { //弹出层消失点击事件
	$('.box').hide(); //弹出层消失
	$('body').removeClass('fixed'); //去掉给body的类
	$('body').removeAttr("style");//去掉内联样式
	$(window).scrollTop(Top); //设置页面滚动的高度，如果不设置，关闭弹出层时页面会回到顶部。
});