ウィンドウリサイズ時のremoveEventListener

Question

前提・実現したいこと

ウィンドウリサイズ時にイベントを削除・追加したいと考えています。
removeEventListenerが思うように動作せず、mousemoveのイベントがmax 767pxのウィンドウサイズでも削除されず、効いてしまいます。理想は、max 767pxのウィンドウサイズ時に、mousemoveのイベントが削除されている状態、もしくは、ウィンドウサイズ別にイベントを実行するすべが知りたいです。
よろしくお願いいたします。

該当のソースコード Javascript

function box() {
    const box__btn = document.getElementById('box__btn');
    function boxl(e){
        const cY = e.clientY;
        box__btn.style.top = 'auto',
        box__btn.style.transform = 'translateY('+cY+'px)';
    };
    function boxs(){
        document.getElementById('box').classList.toggle('open');
    };
    if (window.matchMedia('(min-width: 768px)').matches) {
        box__btn.removeEventListener('click', boxs, false),
        document.body.addEventListener("mousemove", boxl, false);
    } else if (window.matchMedia('(max-width: 767px)').matches) {
        document.body.removeEventListener("mousemove", boxl, false),
        box__btn.style.top = '16px',
        box__btn.style.transform = 'translateY(0px)',
        box__btn.addEventListener('click', boxs, false);
    }
}
window.onresize = function() {
    box();
}

Comments

[m.ts10806]

タグに設定されているPHP、WordPressは本件とはどのような関係があるのでしょうか？

Answer 1

onxxxxとは異なり、addEventListener()は複数のイベントを設定できます。

resizeイベントが発火するたびにbox関数が呼ばれますので、大量のイベントが設定されるはずです。removeEventListener()が呼ばれる回数がそれより少なければ、イベントは残るはずです。

イベントの設定ははじめに一つだけにして、その動作をフラグ変数を使って管理した方がよいと思います。