iOS/iPadOS 16专属select字段Bug修复方案咨询

问题根源 #

这个问题是事件触发顺序和冒泡机制导致的：当你点击外部关闭第一个select时，绑定在document上的点击事件会在第二个select的点击事件之后触发（事件冒泡的顺序），此时关闭逻辑会误将刚打开的第二个select也关掉，出现短暂打开后立即关闭的闪屏现象。

修复方案 #

核心思路是精准控制关闭逻辑的触发条件，避免误判新点击的select为外部区域，同时处理事件时序问题。

方案1：事件过滤+阻止冒泡

在document的点击事件里排除select元素本身的点击，同时在select的点击事件中阻止冒泡，避免触发外部关闭逻辑：

// 绑定外部关闭事件
document.addEventListener('click', (e) => {
  // 点击目标不是select或其内部元素时，执行关闭
  if (!e.target.closest('select')) {
    // 关闭当前处于打开状态的select（假设用open类标记）
    const openedSelect = document.querySelector('select.open');
    if (openedSelect) {
      openedSelect.classList.remove('open');
    }
  }
});

// 处理select的点击事件
document.querySelectorAll('select').forEach(select => {
  select.addEventListener('click', (e) => {
    // 阻止事件冒泡到document，避免触发外部关闭逻辑
    e.stopPropagation();
    // 切换打开状态
    select.classList.toggle('open');
  });
});

方案2：焦点延迟判断（针对原生select焦点问题）

如果是原生select的焦点行为导致的问题，可通过延迟判断焦点归属，避免blur事件误触发关闭：

let currentFocusedSelect = null;

// 记录当前聚焦的select
document.querySelectorAll('select').forEach(select => {
  select.addEventListener('focus', () => {
    currentFocusedSelect = select;
  });
});

// 外部点击逻辑
document.addEventListener('click', (e) => {
  if (!e.target.closest('select') && currentFocusedSelect) {
    currentFocusedSelect.blur();
    currentFocusedSelect = null;
  }
});

// 处理blur事件的时序问题
document.querySelectorAll('select').forEach(select => {
  select.addEventListener('blur', () => {
    // 延迟100ms判断焦点是否转移到其他select
    setTimeout(() => {
      if (document.activeElement.tagName !== 'SELECT') {
        currentFocusedSelect = null;
      }
    }, 100);
  });
});

关键说明 #

• 不要全局关闭所有select，只关闭当前打开的那一个，避免影响新点击的select。
• 利用closest('select')可以精准判断点击目标是否属于select元素，包括option等子元素。
• 延迟判断焦点是为了给浏览器足够时间处理焦点转移，避免误判焦点已离开所有select。

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