javascript - 带有事件源event的事件，如何多个事件调用？

Question

功能：在做移动端页面，点击按钮弹出灰色的遮罩登录框，这时也弹出遮罩，需让后面的body不能再滚动了,效果如下：

代码：
html

 

      <p class="btn">点击出现弹框</p>
      <p id = "box">
         <p>弹框主体</p>
      </p>
      <p>遮罩</p>

要实现移动端，出现弹框时页面不能再滚动，用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、是否有手机端，有其他的方法实现此功能？

Answer 1

弹出层出现时，阻止页面滚动直接用css不就行了- -

document.documentElement.style.overflow = "hidden";

弹出层关闭时：

document.documentElement.style.overflow = "scroll";

Answer 2

你都提到了匿名函数，那么你改后的方案还是匿名函数呀

//出现弹框，不许滚动
    $(document).on('touchmove',function(e){
                stopTouchMove(e);
            });
            
    //隐藏弹框，再次滚动
    $(document).off('touchmove',function(e){
                stopTouchMove(e);
            });

你改的这里依然是匿名函数。。。
你离答案仅仅差一步而已
改成

$(document).on('touchmove', stopTouchMove)
$(document).off('touchmove', stopTouchMove)

就可以了

Answer 3

应该给遮罩层绑事件吧，主要是不要把事件冒泡到body去。

另外，遮罩层建议位置往上提，HTML里越靠下的显示的位置越偏顶层，你模态框（弹框）明显是在遮罩层上边的，所以不要放太靠下，不然又得浪费个z-index……