document.body.removeEventListener 无法移除按键事件的侦听器

Question

我正在添加一个事件侦听器，用于侦听 Escape 按键并关闭图像模态，但是在 Escape 按键时图像模态关闭但事件侦听器不会删除。这是我的代码。请告诉我如何提出这个问题。

function closeImgModal() {
    imgModal.style.display = "none";
    document.body.style.overflowY = "auto";
    document.body.removeEventListener('keydown', closeImgModal)
}

function openBig(el) {
    document.body.style.overflowY = "hidden";
    imgModal.style.display = "block";
    randomImg.src = el.src;
    document.body.addEventListener('keypress', function (e) {
        console.log(e);
        if (e.key === "Escape") {
            closeImgModal();
        }
    });
}

Answer 1

试试这个

function closeImgModal() {
    imgModal.style.display = "none";
    document.body.style.overflowY = "auto";
    document.body.removeEventListener('keypress', closeImgModal)
}

function openBig(el) {
    document.body.style.overflowY = "hidden";
    imgModal.style.display = "block";
    randomImg.src = el.src;
    document.body.addEventListener('keypress', function (e) {
        console.log(e);
        if (e.key === "Escape") {
            closeImgModal();
        }
    });
}

Answer 2

要删除侦听器，事件名称必须相同。你有 keyup 和 keypress。

处理函数引用也需要相同。为此，您需要一个命名函数，该函数是我从您的 addEventlistener 中使用的匿名函数创建的，并将其命名为 handleKeypress

现在 add/remove 使用的参数与要求的相同

function closeImgModal() {
  imgModal.style.display = "none";
  document.body.style.overflowY = "auto";
  document.body.removeEventListener('keypress', handleKeypress)
}

function handleKeypress(e) {
  console.log(e);
  if (e.key === "Escape") {
    closeImgModal();
  }
}

function openBig(el) {
  document.body.style.overflowY = "hidden";
  imgModal.style.display = "block";
  randomImg.src = el.src;
  document.body.addEventListener('keypress', handleKeypress);
}

document.body.removeEventListener 无法移除按键事件的侦听器

document.body.removeEventListener not working for removing listener for keypress event

javascript

event-handling