質問: function(){ console.log('ヘッダークリック!'); } //1026px以上の時にaddEventListener if(!mql.matches) { header.addEventListener('click', clickHeader, { passive: false }); //1025px以下の時にremoveEventListener } else { header.removeEventListener('click', clickHeader, { passive: false }); } } //実行 mql.addEventListener('change', (e) => { e.stopPropagation(); checkBreakPoint(mql); }); ``` ### 試したこと ・実行部分のchangeイベントをresizeイベントに変更 →setTimeoutでイベント発火のタイミング調整をしても、removeEventListener自体は効かないまま ・1026px以上の時の処理(header.addEvent....)の記述が終わった直後に setTimeoutで5秒後にremoveEventListenerの記述をした →5秒後にイベントは削除され、ブレークポイントを跨ぎウィンドウサイズが1025px以下になった時もクリックイベントは削除されたままだった 色々な方のremoveEventListenerに関するご質問を検索していましたが 恥ずかしながら解決策が見つかりませんでした。 大変恐れ入りますが、どうぞよろしくお願いいたします。
回答: `removeEventListener`には、`addEventListener`で指定したのと**同じ関数オブジェクト**を渡す必要があります。 このコードでは`checkBreakPoint`が実行されるたびに新しい関数オブジェクトが作られるので、`removeEventListener`は正しく動作しません。 `let clickHeader = function(){/* 略 */};`を`checkBreakPoint`の外に出せるのであれば、それが手っ取り早いです。