ハンバーガーメニューをレスポンシブする際にSP時の表示で.is-openなどの状態をPC時に保持していたくない場合がある
その際にjsでresizeイベントを用いて画面サイズが変わるごとにイベントを発火させ、PC時には.is-openなどの状態を削除するようにするのが一般的
しかし、resizeイベントでclickイベントが何度も登録され、実際のクリック時に何度も発火して、たとえばアコーディオンが上下し続けたり、ハンバーガーメニューが開かない(実際はデバグすると開いてはいるが、偶数回押した判定となり開く→閉じるという状態になる)ような事態が発生する
それを避けるため、作業を早く終わらせるため、このまとめを作った
結論としては、VanillaJSならremoveEventListener()、jQueryなら.off()をイベントハンドラ(addEventListener()など)の前に置いてresizeイベントで複数回登録されたclickイベントを削除して、新たにイベントを登録し、発火させること
また、removeEventListener()などとは別にリサイズのたびにイベントを起こしたい場合(たとえばconsole.log())は、スコープを分けるなどして実行するようにする
ここにCodePenなどコードをすぐ見られるようにしておきたい
デモ1