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