点击外部关闭搜索框但点击内部输入框/按钮时不关闭的代码问题排查求助

嘿，我瞅了你的代码，问题出在两个小细节上，咱们一步步把它捋顺：

错误点分析 #

1. 选择器写错了：你获取输入框的时候用了 document.querySelector("searchForm--content.active > .searchForm--content__input")，这里的 searchForm--content 是类名，前面少了个.，应该写成 .searchForm--content.active > .searchForm--content__input，不然根本拿不到这个输入框元素。
2. 判断逻辑搞反了：你用了 !event.target.contains(searchFormInput)，但contains是用来判断父元素是否包含子元素的，这里你应该检查的是「点击的目标是不是在搜索框内容区域（.searchForm--content）里面」，而不是反过来判断目标元素是否包含输入框。

修正后的完整代码 #

JavaScript 部分

const searchIcon = document.querySelector("#searchIcon");
const searchContent = document.querySelector(".searchForm--content");

searchIcon.addEventListener("click", function() {
  searchContent.classList.toggle("active");
});

window.onclick = function(event) {
  // 如果点击的不是搜索图标，且点击的元素不在搜索框内容区域内，同时搜索框是激活状态
  if (!event.target.matches('#searchIcon') && !searchContent.contains(event.target)) {
    if (searchContent.classList.contains('active')) {
      searchContent.classList.remove('active');
    }
  }
}

CSS 部分（原有代码无问题，直接保留）

.searchForm--content{
  position: relative
}

#searchIcon{
  background-color: green;
  color: white;
  padding: 12px;
  width: fit-content;
}

.searchForm > img {
  cursor: pointer;
  width: auto;
  vertical-align: middle;
}

.searchForm--content{
  border: 1px solid blue;
  border-radius: 10px;
  padding-inline:0.75rem;
  color: black;
  position: absolute;
  left: 12px;
  width: 40%;
  top: 70px;
  display: none;
  align-items: center;
  justify-content: space-between;
}

.searchForm--content.active {
  display: flex;
}

.searchForm--content .btn{
  position: absolute;
  left:0.2rem;
  top:50%;
  transform: translatey(-50%);
}

.searchForm--content input[type="search"]{
  width: 65%;
  border: 1px solid red;
  padding: 1rem 0.5rem;
  color: black;
  margin-left: auto;
}

HTML 部分（原有代码无问题，直接保留）

<form class="searchForm" role="search">
  <div id="searchIcon">my icon search</div>
  <div class="searchForm--content" id="my-box">
    <input type="search" placeholder="search" name="s" inputmode="search"  class="searchForm--content__input" />
    <button type="submit" class="btn btn--blue" >submit</button>
  </div>
</form>

修正后的逻辑说明 #

• 点击搜索图标时，正常切换搜索框的active类，控制显示和隐藏。
• 全局点击事件里，我们只需要做两个判断：一是点击的不是搜索图标，二是点击的元素不在搜索框的内容区域内（用searchContent.contains(event.target)来检查），如果这两个条件都满足，且搜索框是激活状态，就关闭它。这样点击搜索框内部的输入框、按钮时，就不会触发关闭操作啦~

备注：内容来源于stack exchange，提问作者h.m.p.frontendDeveloper