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

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

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

现在用于添加/删除的参数与需要的相同

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);

}

Answer 2

尝试这个

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();

        }

    });

}