使用 e.target 時不清除輸入

Question

我不知道發生了什么事。 下面是JS應用程序中運行的負責關閉和打開搜索框的JS代碼。 通過按下帶十字鍵的按鈕、Esc 鍵盤和此 window 中的任何位置來關閉

const btn = document.querySelector('.head__search-icon'),
body = document.body,
search = document.querySelector('.search'),
searchInner = document.querySelector('.search__inner'),
searchOverlay = document.querySelector('.search__overlay'),
searchInput = document.querySelector('#search__input'),
btnClose = document.querySelector('.search__closed-button');
body.classList.add('no-search'),
search.style.display = 'none';


function searchOpen() {
btn.addEventListener('click', () => {
    body.classList.remove('no-search');
    body.classList.add('is-search');
    search.style.display = 'block';
    setTimeout(() => searchInput.focus(), 100);
    if (body.classList.contains('is-head-open')) {
        body.classList.remove('is-head-open');
    }
});
}
searchOpen();

function searchClose() {
    body.classList.add('no-search');
    body.classList.remove('is-search');
    searchInput.value = '';
    searchInput.blur();

}

function searchRemove(e) {
    if(e.code === "Escape" && body.classList.contains('is-search') || e.target === searchOverlay || e.target === searchInner) {
        searchClose();
    }
}

document.addEventListener('keydown', searchRemove);
search.addEventListener('click', searchRemove);
btnClose.addEventListener('click', searchClose);

事實是，如果有搜索結果，然后按 Esc，那么一切正常，輸入的焦點消失，輸入本身被清除。 但是，如果您單擊 window 中的任意位置（ e.target === searchOverlay || e.target === searchInner ），則 window 本身將關閉，輸入將被清除，正如我所需要的，除了視覺上干凈的輸入，搜索結果仍然存在。 也就是說，您再次打開 window 並看到相同的搜索結果，盡管輸入是空的。 使用 Esc 時，輸入實際上被清除。 腳本中的門框在哪里？

Answer 1

總的來說，我讓它變得更容易，在searchClose() function 中添加了一個結構來刪除使用innerHTML = ' '的搜索結果