JavaScript隐藏HTML列表时导致链接失效的问题及需求实现

问题根源 #

当前代码里，搜索框的blur事件会在点击列表链接之前触发，直接将UL设置为display:none，导致链接还没完成点击操作就被隐藏，所以点击失效。

修复后完整代码 #

HTML（无需修改）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <nav>
    <div class="nav-left">
      <a href="#"><button id="HBtn"><i class="fa fa-home"></i><br>Home</button></a>
    </div>
    <div class="nav-mid">
      <p id="page">Home</p>
    </div>
    <div class="nav-right">
      <input type="search" id="sinput" placeholder="Search for Names..." autocomplete="off" onkeyup="MyFunction()">
    </div>
  </nav>
</header>
<div class="page-wrapper">
  <div class="sidebar"></div>
  <ul class="searchlist" id="myUL">
    <li><a href="#"> Adele  </a></li>
    <li><a href="#"> Agnes  </a></li>
    <li><a href="#"> Billy  </a></li>
    <li><a href="#"> Bob    </a></li>
    <li><a href="#"> Calvin </a></li>
  </ul>
</div>

CSS（无需修改）

body {
  background-color : rgb(63, 63, 63);
  margin           : 0;
  }
nav {
  background-color : black;
  height           : 56px;
  top              : 0;
  left             : 0;
  }
.nav-left {
  height  : 56px;
  width   : 33%;
  display : inline-block;
  }
.nav-mid {
  height     : 56px;
  width      : 33%;
  display    : inline-block;
  color      : white;
  text-align : center;
  font-size  : 30px;
  }
.nav-right {
  height  : 56px;
  width   : 33%;
  display : inline-block;
  }
#HBtn {
  margin-left  : 25%;
  margin-right : 25%;
  height       : 80%;
  font-weight  : bolder;
  }
#page {
  margin-top : 0;
  }
#search {
  display : inline-block;
  }
div.page-wrapper {
  width  : 100%;
  height : 567px;
  }
div.sidebar {
  width            : 20%;
  height           : 100%;
  background-color : rgb(35, 35, 35);
  border           : solid 2px black;
  }
#myUL {
  position         : absolute;
  top              : 56px;
  right            : 18%;
  width            : 200px;
  height           : 250px;
  border           : 3px solid black;
  background-color : white;
  overflow         : scroll;
  margin-top       : 0;
  padding          : 0;
  display          : none;
  }
ul.searchlist>li>a {
  list-style      : none;
  text-align      : center;
  margin-top      : 10px;
  text-decoration : none;
  color           : black;
  }

修改后的JavaScript

var UL       = document.getElementById("myUL");
var SerInput = document.getElementById("sinput");
var hideTimeout; // 用于存储延迟隐藏的定时器ID

// 聚焦时显示列表（如果输入框有内容）
SerInput.addEventListener("focus", function() {
  if (this.value.trim().length > 0) {
    UL.style.display = "block";
  }
});

// 延迟隐藏列表，给点击链接留时间
SerInput.addEventListener("blur", function() {
  hideTimeout = setTimeout(() => {
    UL.style.display = "none";
  }, 200);
});

// 点击列表时清除延迟，避免隐藏
UL.addEventListener("mousedown", function() {
  clearTimeout(hideTimeout);
});

function MyFunction() {
  var input, filter, ul, li, a, i;
  input  = document.getElementById("sinput");
  ul     = document.getElementById("myUL");
  filter = input.value.toUpperCase();

  // 输入为空时隐藏列表
  if (filter.trim().length < 1) {
    ul.style.display = "none";
    return false;
  } else {
    ul.style.display = "block";
  }
  
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];

    // 匹配包含搜索字符串的项
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

关键修改说明 #

1. 解决链接点击失效：
   • 给blur事件添加setTimeout延迟隐藏列表，让浏览器先处理链接的点击事件，再执行隐藏操作。
   • 给UL添加mousedown事件，点击列表时清除延迟定时器，确保列表不会被误隐藏。
2. 完善聚焦显示逻辑：
   • 搜索框聚焦时，如果输入框已有内容，自动显示列表。
3. 保留原有搜索过滤功能：
   • 原有的匹配包含搜索字符串的逻辑保持不变，也可以切换到注释里的开头匹配逻辑。

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