Question

请帮忙。

有一段代码必须删除eventListener(keydown)，但是不行。这是一个代码：

export const createPostSuccessMessage = () => {
    const mainPage = document.querySelector('main');
    const successTemplate = document.querySelector('#success').content.querySelector('.success');
    const successDiv = successTemplate.cloneNode(true);

    const successClickListenerAdd = () => {
      if (mainPage.lastChild.className === 'success'){
        mainPage.removeChild(mainPage.querySelector('.success'));
      }
      document.removeEventListener('click', successClickListenerAdd)
    }

  //this one seems not to work, but I don't know why

    const successEscListenerAdd = (evt) => {
      if (evt.keyCode === 27) {
        if (mainPage.lastChild.className === 'success'){
          mainPage.removeChild(mainPage.querySelector('.success'));
        }
      }
      document.removeEventListener('keydown', successEscListenerAdd)

    }

    mainPage.appendChild(successDiv);
    document.addEventListener('click', successClickListenerAdd);
    document.addEventListener('keydown', successEscListenerAdd);
    formReset();
    resetMainMarker();
  }

export const createPostErrorMessage = () => {
    const mainPage = document.querySelector('main');
    const errorTemplate = document.querySelector('#error').content.querySelector('.error');
    const errorDiv = errorTemplate.cloneNode(true);

    const errorClickListenerAdd = () => {
      if (mainPage.lastChild.className === 'error'){
        mainPage.removeChild(mainPage.querySelector('.error'));
      }
      document.removeEventListener('click', errorClickListenerAdd)
    }

//this one seems not to work, but I don't know why

    const errorEscListenerAdd = (evt) => {
      if (evt.keyCode === 27) {
        if (mainPage.lastChild.className === 'error'){
          mainPage.removeChild(mainPage.querySelector('.error'));
        }
      }
      document.removeEventListener('keydown', errorEscListenerAdd)
    }

    mainPage.appendChild(errorDiv);
    document.addEventListener('click', errorClickListenerAdd);
    document.addEventListener('keydown', errorEscListenerAdd);


    mainPage.querySelector('.error__button').addEventListener('click', (evt) => {
      evt.preventDefault();
      if (mainPage.lastChild.className === 'error'){
        mainPage.removeChild(mainPage.querySelector('.error'));
      }
    })
}

Answer 1

在 addEventListener 的第三个参数中使用 once 选项可能更容易。这样可以确保事件只会被监听一次。

document.addEventListener('click', successClickListenerAdd, { once: true });
document.addEventListener('keydown', successEscListenerAdd, { once: true });

无法删除事件监听器

1 个答案: