如何修改JS实现鼠标移出按钮与search-list后隐藏该列表？

要实现鼠标移出按钮和search-list区域后隐藏列表，可以通过跟踪鼠标hover状态+监听全局点击事件的组合方式来实现，具体修改如下：

完整代码示例 #

<button>Tests</button>

<div id="search-list" style="display:none">
  search-list
</div>

<style>
#search-list {
  width: 150px;
  height: 150px;
  background-color: aquamarine;
}
</style>

<script>
// 获取元素
const toggleBtn = document.querySelector('button');
const searchList = document.getElementById('search-list');
// 标记鼠标是否停留在按钮或列表区域内
let isHoveringArea = false;

// 点击按钮显示列表
toggleBtn.addEventListener('click', () => {
  searchList.style.display = 'block';
});

// 鼠标进入按钮/列表时，标记为正在hover
function onAreaEnter() {
  isHoveringArea = true;
}
toggleBtn.addEventListener('mouseenter', onAreaEnter);
searchList.addEventListener('mouseenter', onAreaEnter);

// 鼠标离开按钮/列表时，延迟判断是否要隐藏列表
function onAreaLeave() {
  isHoveringArea = false;
  // 加100ms延迟，避免鼠标在按钮和列表之间移动时误隐藏
  setTimeout(() => {
    if (!isHoveringArea) {
      searchList.style.display = 'none';
    }
  }, 100);
}
toggleBtn.addEventListener('mouseleave', onAreaLeave);
searchList.addEventListener('mouseleave', onAreaLeave);

// 点击页面其他区域时直接隐藏列表
document.addEventListener('click', (e) => {
  const isClickInBtn = toggleBtn.contains(e.target);
  const isClickInList = searchList.contains(e.target);
  if (!isClickInBtn && !isClickInList) {
    searchList.style.display = 'none';
  }
});
</script>

关键逻辑说明 #

• hover状态跟踪：给按钮和列表都绑定mouseenter/mouseleave事件，用变量标记鼠标是否在目标区域内。加延迟是为了避免鼠标在按钮和列表之间快速移动时，触发不必要的隐藏操作。
• 全局点击监听：监听整个文档的点击事件，如果点击的元素既不是按钮、也不是列表（及其子元素），就直接隐藏列表，覆盖用户点击页面其他地方的场景。

内容的提问来源于stack exchange，提问作者bkw