JavaScriptのaddEventListenerが複数回追加されるのを防ぎたい。

Question

前提・実現したいこと

JavaScriptのaddEventListenerが複数回追加されるのを防ぎたい。
クリックイベントの削除を行いたい。

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

ポップアップ自体は、きちんと実装することができたのですが、クリックしたときにポップアップを表示・非表示させる仕組みを書いてる関数が2回目以降に呼びだされた時、addEventListenerが複数回追加されてしまいます。

そのため、関数が２回以上呼ばれた時は、クリックが一度に２回以上押されて、ポップアップが表示されなかったり、ポップアップが消えなかったりします。

該当のソースコード

function popupExample() {
    // ポップアップのHTML要素を取得、なければ終了
    var popup = document.getElementById('js-popup');
    if(!popup) return;
    // ポップアップのそれぞれの要素を取得
    var blackBg = document.getElementById('js-black-bg');
    var closeBtn = document.getElementById('js-close-btn');
    var showBtn = document.getElementById('js-show-btn');

    closePopup(blackBg);
    closePopup(closeBtn);
    closePopup(showBtn);

    function closePopup(elem) {
        if(!elem) return;
        elem.removeEventListener("click", addToggle);
        elem.addEventListener("click", addToggle);
    }

    function addToggle() {
        popup.classList.toggle('is-show');
    }
}
    

こちらの関数を複数回呼び出しており、調査すると１回目、３回目、５回目のような奇数回の時は、正しく動いております。

それぞれ奇数回の呼び出し時には、クリックを何回してもきちんと動きます。

試したこと

まずは、この関数自体が正しく動いて、ポップアップが表示されることは確認済みです。

ただし、コンソールログを用いてのデバック実行で、関数が2回目以降呼び出された時は、一度のクリックで複数回（呼び出された回数分だけ）クリックされることが判明。

そのため、クリックイベントを消せないかと、removeEventListenerを追加して、テストしたが結果変わらず。

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

ここにより詳細な情報を記載してください。

Comments

[maisumakun]

このコードは、ネストなどは合っていますか？

（addToggleがpopupExampleの外側にあるのでしたら、popupは取れなくなるはずです）

[ingeniero]

すみません。コードをここのサイトに移す時に、間違えた模様です。
自分のコードではしっかり内側に入ってるので、大丈夫です。
ポップアップ自体は、1回目に関数を呼んだ時は動作するので、コード自体に問題はないと思います。

Answer 1

removeEventListenerは、セットしたときと同じ関数インスタンスを指定しないと解除できません。

addToggleがpopupExampleの内側にあるということは、popupExampleを実行するたびにaddToggleの別のインスタンスが作られる、ということになり、removeEventListenerは全く無意味になります。

（奇数回のときに正常動作するように見えるのは、クラスを奇数回反転させれば、1回反転したのと同じ結果になるからだと思われます）

Comments

[maisumakun]

なお、実用的にはイベントの付け外しで制御するのは面倒なので、イベントはつけっぱなしにして、別に作った状態フラグを切り替えて「フラグの状態によっては何もせず抜ける」、というようにすることが多いです。

[ingeniero]

ありがとうございます。
ご指摘の通り、addToggleをpopupExampleの外側に配置して、全く同じ関数インスタンスを呼び出すことで、無事何回関数を呼び出しても、ポップアップを正常に表示することができました。
感謝しております。
また、実用的な方法までご教授いただきまして大変勉強になりました。
まだまだ初心者なのですが、頑張りたいと思います。
本当にありがとうございました。