点击搜索栏列表内锚点时Pop-up不显示的问题求助

问题根源 #

点击下拉列表内的锚点时，输入框的blur事件会优先触发，立刻隐藏下拉列表<ul id="myUL">，导致浏览器来不及处理锚点的跳转逻辑，模态框的:target状态无法正常触发。而列表外的图片锚点不受输入框blur事件影响，因此能正常工作。

核心解决方案 #

给输入框的blur事件添加短暂延迟，让浏览器先完成锚点点击的处理，再隐藏下拉列表。

修改后的代码 #

JavaScript

var UL = document.getElementById("myUL");
// 默认隐藏列表
UL.style.display = "none";

var searchBox = document.getElementById("myInput");

searchBox.addEventListener("focus",  function(){
    // 原代码注释逻辑保持不变
});

// 修改blur事件：添加延迟再隐藏列表
searchBox.addEventListener("blur", function(){
    setTimeout(() => {
        UL.style.display = "none";
    }, 150); // 150ms足够浏览器处理锚点跳转
});


function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    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";
        } 
    }
}

可选优化（提升体验） #

如果不想让下拉列表有延迟隐藏的视觉残留，可以在点击锚点时直接清除延迟计时器并手动隐藏列表：

var blurTimer;
searchBox.addEventListener("blur", function(){
    blurTimer = setTimeout(() => {
        UL.style.display = "none";
    }, 150);
});

// 给下拉列表所有锚点绑定点击事件
var anchors = UL.getElementsByTagName('a');
for(let a of anchors) {
    a.addEventListener('click', () => {
        clearTimeout(blurTimer);
        UL.style.display = "none"; // 点击后立刻隐藏列表
    });
}

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