单击事件侦听器干扰onclick()

Question

我建立了一个弹出式搜索框，如果我点击搜索btn或按键盘上的任何键，它就会打开。对于关闭弹出窗口，按esc键并按关闭按钮，然后单击搜索框外将完成这项工作。但是我遇到了一个问题，对于使用搜索按钮打开的弹出窗口，我使用onclick属性并调用函数对于关闭弹出窗口，如果我点击弹出窗口外，我使用点击事件监听器，这些相互干扰，所以当我点击搜索按钮时，弹出窗口将打开，并立即点击事件监听器关闭弹出!!!!那我该怎么办?!

搜索btn:

<a href="#" onclick="openSearch()"><i class="fas fa-search"></i></a>

opensearch()函数:

function openSearch() {
document.getElementById("popup").style.display = "block";
document.getElementById("search-field").focus();
}

外部点击的事件监听器:

document.addEventListener ('click', function(event) {
// Detect outside clicks
var isClickInside = document.getElementById('PopupSearchWrapper').contains(event.target);
if (!isClickInside) {
closeSearch();
}
});

Answer 1

(使用bulma CSS类)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<div class="modal" id="search">
<div class="modal-background" id='back'></div>
<div class="modal-card">
<button class="delete" id="result-close"></button>
</div>
</div>

因为背景和卡片是兄弟姐妹(具有高z-index)，那么不是卡片的将是背景。只需将背景和关闭按钮.onclick设置为closeSearch()

CSS关键属性

html {
margin:0;
padding:0
}
.modal{
align-items:center;
display:none; // display: flex when active
flex-direction:column;
justify-content:center;
overflow:hidden;
position:fixed;
z-index:40
}
.modal-background {
bottom:0;
left:0;
position:absolute;
right:0;
top:0
}