Firefox Android：屏幕键盘开启时点击元素无响应问题求助

问题现象 #

• 软键盘开启状态下输入文本后，点击输入到第三个字符时才移除display:none显示的自动完成下拉框（<ul>元素），会出现：
  1. 软键盘正常收起
  2. 首次点击完全无效，调试器显示绑定的点击事件处理器未触发
  3. 第二次点击该元素，功能恢复正常
• 页面中原本就存在的带点击事件的元素，在软键盘开启时点击完全正常

环境差异 #

仅在近期版本的Firefox for Android中出现此问题，Chrome、升级到16.x版本后的iPad Safari均无异常。

原因分析 #

这是Firefox for Android的特定兼容性Bug：当软键盘处于激活状态时，浏览器对此时才动态显示（或创建）的DOM元素的事件传递逻辑存在异常——软键盘收起的动作会优先拦截首次点击事件，导致事件无法传递到元素绑定的处理器上，第二次点击时软键盘已完全收起，事件系统恢复正常。

解决方案 #

方案1：事件委托（推荐） #

放弃直接为动态下拉框的子元素绑定点击事件，改用事件委托，在父元素或document上监听点击，通过事件冒泡机制处理：

// 假设下拉框的类名为autocomplete-dropdown，子项类名为dropdown-item
document.addEventListener('click', (e) => {
  const targetItem = e.target.closest('.dropdown-item');
  if (targetItem) {
    // 执行下拉项点击逻辑
    console.log('点击了下拉项:', targetItem.textContent);
  }
});

这种方式不受元素动态显示时机的影响，能直接绕过Firefox的事件拦截问题。

方案2：延迟绑定事件 #

监听输入框的blur事件（软键盘收起时输入框会失焦），延迟100ms左右再为下拉框绑定点击事件，确保软键盘完全收起后事件绑定生效：

const input = document.getElementById('search-input');
const dropdown = document.getElementById('autocomplete-list');

input.addEventListener('blur', () => {
  setTimeout(() => {
    // 为下拉项绑定点击事件
    dropdown.querySelectorAll('.dropdown-item').forEach(item => {
      item.addEventListener('click', handleItemClick);
    });
  }, 100);
});

function handleItemClick(e) {
  // 处理点击逻辑
  console.log('选中项:', e.target.textContent);
}

方案3：触发焦点同步 #

在下拉框显示后，主动让其获得焦点再失去焦点，强制浏览器同步事件系统：

// 显示下拉框的逻辑中添加
dropdown.style.display = 'block';
dropdown.focus();
dropdown.blur();

验证说明 #

已通过最小化复现案例确认，该问题是Firefox for Android针对软键盘激活状态下动态元素的事件处理异常，属于浏览器特定Bug，并非代码逻辑问题。

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