javascript - 带有事件源event的事件,如何多个事件调用?
本文介绍了javascript - 带有事件源event的事件,如何多个事件调用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
功能:在做移动端页面,点击按钮弹出灰色的遮罩登录框,这时也弹出遮罩,需让后面的body不能再滚动了,效果如下:
代码:html
<p class="btn">点击出现弹框</p>
<div id = "box">
<p>弹框主体</p>
</div>
<div>遮罩</div>
要实现移动端,出现弹框时页面不能再滚动,用touchmove,阻止默认事件实现js
//点击按钮,出现弹框
$(".btn").on("tap", function(e) {
var event = e;
showBtnPannel(event);//出现弹框
//【重点】给body增加一个事件,阻止页面滚动!!!
$(document).on('touchmove',function(e){
e.preventDefault();
});
})
//点击关闭,隐藏弹框,并且允许页面再次滚动
$('.close,.ok').on("tap", function(e) {
$('.modal_box,.mask_layer').hide();
//【重点】允许手机屏幕移动!!!
$(document).off('touchmove',function(e){
e.preventDefault();
});
});
问题描述
弹框出现时绑定的touchmove事件,我想在关闭弹框时,把那个不允许滚动的事件取消,但是,如果用我上面的写法,浏览器不会知道on 和 off 事件是指同一个的,,,于是我把阻止页面的function拎出来了函数stopTouchMove,on和off都把他执行,还是不行!
var stopTouchMove = function(param){
param.preventDefault();
}
//出现弹框,不许滚动
$(document).on('touchmove',function(e){
stopTouchMove(e);
});
//隐藏弹框,再次滚动
$(document).off('touchmove',function(e){
stopTouchMove(e);
});
问题:
1、这个方法有什么问题?如何解决这种要传入事件源本身的匿名函数,都要调用的情况?
2、是否有手机端,有其他的方法实现此功能?
解决方案
你都提到了匿名函数,那么你改后的方案还是匿名函数呀
//出现弹框,不许滚动
$(document).on('touchmove',function(e){
stopTouchMove(e);
});
//隐藏弹框,再次滚动
$(document).off('touchmove',function(e){
stopTouchMove(e);
});
你改的这里依然是匿名函数。。。
你离答案仅仅差一步而已
改成
$(document).on('touchmove', stopTouchMove)
$(document).off('touchmove', stopTouchMove)
就可以了
这篇关于javascript - 带有事件源event的事件,如何多个事件调用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文