preventDefaultを解除する際の挙動が納得できない

Question

前提・実現したいこと

スマホ画面上でモーダルが表示された際にすべてのスクロールを止めるため、
preventDefaultでイベントをキャンセルしています。
モーダルが消去された際にはスクロールを再び動作させたいと思ってます。

発生している問題・エラーメッセージ

こちらの関数を変数に格納している際には正しい動作をしてくれるが、
直接書いた場合には開始処理がうまく動いてくれません。該当箇所下に記載します。

function(event){event.preventDefault();}

該当のソースコード

こちらは正しく動きます。

$(function(){
  // スクロール停止、開始用の関数
  var movefun = function(event){
    event.preventDefault();
  }

$(".modal-button").click(function(){
    // スクロール停止の処理
    window.addEventListener("touchmove", movefun, {passive: false});

    return false;
});

$(".modal-close").click(function(){
    // スクロール開始の処理
    window.removeEventListener("touchmove", movefun, {passive: false});

    return false;
});

こちらはスクロールの停止までは動きますが、開始されません。

$(function(){
  // スクロール停止、開始用の関数
  var movefun = function(event){
    event.preventDefault();
  }

$(".modal-button").click(function(){
    // スクロール停止の処理
    window.addEventListener("touchmove", function(event){event.preventDefault();}, {passive: false});

    return false;
});

$(".modal-close").click(function(){
    // スクロール開始の処理
    window.removeEventListener("touchmove", function(event){event.preventDefault();}, {passive: false});

    return false;
});

試したこと

開始、終了後のpassiveの中身を見てみましたが、
どちらもfalseだったりで、お手上げ状態です。

補足情報（FW/ツールのバージョンなど）

ios12 Safari
PC版Chromeの開発者ツールのテスターでも再現するかと思います。

preventDefaultで消したイベントを復活させる
もっといい最適解もあればお伺いできますと幸いです。
よろしくお願いいたします。

Answer 1

removeEventListenerで正しくイベントを解除するには、addEventListenerと同じ関数オブジェクトを渡さないといけません。

全く同じ内容で作った関数リテラルでも、別々に書けば別な関数オブジェクトとなってしまうので、正しくremoveEventListenerを行うには、「変数に保管しておく」あるいは「関数宣言として書いて同じものを使う」といった方法しかありません。

Comments

[bunbun]

ご教示頂きありがとうございます。
すみません、二年前にも同じような内容に返答されていたのですね。
https://teratail.com/questions/47620

"removeEventListener"の挙動について納得いたしました。
また今回のようなスクロールのイベントをtoggleする際の方法として
maisumakunさまでしたら前述の方法と似た形を選択されますでしょうか？
もし異なった方法をお選びになるとしたら、是非後学のためお伺いできますと嬉しいです。