Popup多方式显隐异常问题及代码修复咨询

云原生阿岚

2026-7-9

解决Popup显隐状态冲突的问题

问题核心是输入框blur事件比图标点击事件先触发：点击图标时，blur先把isPopupVisible设为false，随后图标点击的toggle逻辑又把它设为true，最终出现“先隐藏再显示”的异常。

以下两种方案都能保留isPopupVisible变量的控制权，不影响它在其他逻辑中的使用：

方案一：用延迟执行规避事件顺序问题

在输入框的blur事件中，通过setTimeout延迟修改状态的逻辑，让图标点击事件先执行完毕，再判断是否需要隐藏Popup：

// 输入框失焦事件处理
input.addEventListener('blur', () => {
  setTimeout(() => {
    // 检查当前焦点是否落在图标上，不是的话再修改状态
    if (!icon.contains(document.activeElement)) {
      isPopupVisible = false;
      // 同步更新依赖该变量的UI或其他逻辑
    }
  }, 100);
});

// 图标点击切换逻辑
icon.addEventListener('click', () => {
  isPopupVisible = !isPopupVisible;
  // 同步更新依赖该变量的UI或其他逻辑
  // 可选：点击图标后让输入框主动失焦，避免后续焦点冲突
  input.blur();
});

方案二：通过mousedown事件提前标记点击目标

利用mousedown事件早于blur触发的特性，在图标上监听mousedown标记点击状态，再在blur事件中根据标记决定是否修改状态：

let isClickingIcon = false;

// 图标按下时标记状态
icon.addEventListener('mousedown', () => {
  isClickingIcon = true;
});

// 全局松开鼠标时重置标记，避免状态残留
document.addEventListener('mouseup', () => {
  isClickingIcon = false;
});

// 输入框失焦事件处理
input.addEventListener('blur', () => {
  if (!isClickingIcon) {
    isPopupVisible = false;
    // 同步更新依赖该变量的UI或其他逻辑
  }
});

// 图标点击切换逻辑
icon.addEventListener('click', () => {
  isPopupVisible = !isPopupVisible;
  // 同步更新依赖该变量的UI或其他逻辑
});