点击事件监听器干扰 onclick()答案

【问题标题】：click event listener interfere with onclick()点击事件监听器干扰 onclick()
【发布时间】：2021-10-13 10:46:35
【问题描述】：

我构建了一个弹出式搜索框，如果我点击搜索 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();
  }
});

【问题讨论】：

标签： javascript user-interface frontend

【解决方案1】：

（使用bulma css classes）

<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
}

【讨论】：