JavaScript で addEventListener で設定したイベントを removeEventListener で削除できない問題の解決方法をご紹介します。

前提知識 - addEventListener, removeEventListener

addEventListener, removeEventListener のそれぞれの仕様は、以下の記事をご確認ください。

• EventTarget.addEventListener() - Web API | MDN
• EventTarget.removeEventListener - Web API | MDN

removeEventListener でイベント削除できない事例

事例) listener 関数を再定義している

イベント削除できないコード

onKeyDown 内に touchmoveListener を定義すると、onKeyDown が呼び出される度に touchmoveListener が再定義してしまいます。 そのため、addEventListener に渡している touchmoveListener と removeEventListener に渡している touchmoveListener が同じ function を指してないのでイベントを削除できません。

window.onload = () => {
  window.addEventListener('keydown', onKeyDown, false);
}

function onKeyDown(event) {
  function touchmoveListener(event) {
    event.preventDefault();
    console.log('handleTouchMove called');
  }

  if (event.key === 'Enter') {
    document.addEventListener('touchmove', touchmoveListener, { passive: false });
  } else if (event.key === 'Backspace' || event.key === 'Delete') {
    document.removeEventListener('touchmove', touchmoveListener, { passive: false });
  }
}

イベント削除できるコード

window.onload = () => {
  window.addEventListener('keydown', onKeyDown, false);
}

function touchmoveListener(event) {
  event.preventDefault();
  console.log('handleTouchMove called');
}

function onKeyDown(event) {
  if (event.key === 'Enter') {
    document.addEventListener('touchmove', touchmoveListener, { passive: false });
  } else if (event.key === 'Backspace' || event.key === 'Delete') {
    document.removeEventListener('touchmove', touchmoveListener, { passive: false });
  }
}

以上、JavaScript で removeEventListener でイベントが削除できない問題を解決したい、現場からお送りしました。