亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

document.body.removeEventListener 不適用于刪除按鍵事件的偵聽器

document.body.removeEventListener 不適用于刪除按鍵事件的偵聽器

倚天杖 2023-03-18 17:41:58
我正在添加一個事件偵聽器,它偵聽 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();        }    });}
查看完整描述

2 回答

?
MYYA

TA貢獻1868條經驗 獲得超4個贊

要刪除偵聽器,事件名稱需要相同。你有 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);

}


查看完整回答
反對 回復 2023-03-18
?
慕慕森

TA貢獻1856條經驗 獲得超17個贊

嘗試這個


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

        }

    });

}


查看完整回答
反對 回復 2023-03-18
  • 2 回答
  • 0 關注
  • 205 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號