搜索框的模糊事件与 搜索框提示框文本替换的点击事件冲突记录

当点击 li 时，input 会先触发 blur 事件（失去焦点），导致 ul 被隐藏（display: none），然后 li 的点击事件才触发，但此时 ul 已经不可见了，所以 li 的点击无法生效。

代码如下

<body>
    <div class="outer">
        <div>
            <input type="text" placeholder="小米笔记本">
        </div>
        <ul>
            <li>全部商品</li>
            <li>小米11</li>
            <li>小米10S</li>
            <li>小米笔记本</li>
            <li>小米手机</li>
            <li>黑鲨4</li>
            <li>空调</li>
        </ul>
    </div>

    <script>
        const input = document.querySelector('.outer input')
        const ul = document.querySelector('.outer ul')
        const liList = document.querySelectorAll('.outer ul li')

        input.addEventListener('focus',function(){
            ul.style.display = 'flex'
            input.style.borderColor = 'orange'
            ul.style.borderColor = 'orange'

        })
        input.addEventListener('blur',function(){
            ul.style.display = 'none'
            input.style.borderColor = 'black'
            ul.style.borderColor = 'black'
        })
        for(let i =0;i<liList.length;i++){
            liList[i].addEventListener('click',function(){
                input.value = liList[i].innerText
            })
        }
    </script>
</body>

以下是解决方法：

方法 1：使用 mousedown 代替 click
mousedown 事件在 blur 之前触发，可以确保在 ul 隐藏前完成文本替换：

for (let i = 0; i < liList.length; i++) {
  liList[i].addEventListener('mousedown', function(e) {
    e.preventDefault(); // 阻止默认行为（可选）
    input.value = this.innerText;
  });
}

方法 2：延迟隐藏 ul
在 blur 事件中加一个短暂延迟，确保 click 事件先执行

方法 3：完全由 JavaScript 控制显示/隐藏
运用事件对象属性 e.currentTarget 判断事件触发的对象


document.addEventListener('click', function(e) {
  const isClickInside = ul.contains(e.target) || input.contains(e.target);
  if (!isClickInside) {
    ul.style.display = 'none';
    input.style.borderColor = 'black';
    ul.style.borderColor = 'black';
  }
});

input.addEventListener('focus', function() {
  ul.style.display = 'flex';
  input.style.borderColor = 'orange';
  ul.style.borderColor = 'orange';
});

for (let i = 0; i < liList.length; i++) {
  liList[i].addEventListener('click', function() {
    input.value = this.innerText;
  });
}
posted @ 2025-06-15 18:32  让时间变成力量  阅读(25)  评论(0)    收藏  举报