知识点:
① 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可以达到效果,但是会将页面滑动到最初的位置。
方法一:
扫描二维码关注公众号,回复:
4600796 查看本文章
//阻止页面滚动
$("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); //设置页面滚动的高度,如果不设置,关闭弹出层时页面会回到顶部。
});