ハンバーガーメニューをレスポンシブする際にSP時の表示で.is-openなどの状態をPC時に保持していたくない場合がある

その際にjsでresizeイベントを用いて画面サイズが変わるごとにイベントを発火させ、PC時には.is-openなどの状態を削除するようにするのが一般的

しかし、resizeイベントでclickイベントが何度も登録され、実際のクリック時に何度も発火して、たとえばアコーディオンが上下し続けたり、ハンバーガーメニューが開かない(実際はデバグすると開いてはいるが、偶数回押した判定となり開く→閉じるという状態になる)ような事態が発生する

それを避けるため、作業を早く終わらせるため、このまとめを作った

結論としては、VanillaJSならremoveEventListener()、jQueryなら.off()をイベントハンドラ(addEventListener()など)の前に置いてresizeイベントで複数回登録されたclickイベントを削除して、新たにイベントを登録し、発火させること

また、removeEventListener()などとは別にリサイズのたびにイベントを起こしたい場合(たとえばconsole.log())は、スコープを分けるなどして実行するようにする

ここにCodePenなどコードをすぐ見られるようにしておきたい

デモ1