17370845950

本文解决 firefox 下点击输入框无法稳定获得焦点的问题，通过修正事件绑定逻辑与隐藏条件，确保与 chrome 一致的点击即聚焦、失焦自动收起行为。

在 Web 开发中，常见“点击标题展开搜索框 → 点击输入框自动聚焦”的交互模式。原始代码在 Chrome 中表现正常，但在 Firefox 中存在明显问题：点击输入框时内容区域可能闪退、焦点丢失或无法持续保持。根本原因在于 Firefox 对 mouseup 事件冒泡和元素判断更为严格，且原始逻辑中 .blur() 强制失焦与后续 .focus() 存在竞争，同时全局 $(document).mouseup() 未排除输入框自身，导致刚聚焦即被隐藏。

✅ 正确解决方案要点

1. 移除冗余 .blur()：避免人为中断聚焦流程；
2. 聚焦时机统一为 .focus()（非 .blur() 后再 .focus()）；
3. 精准控制隐藏逻辑：仅当点击目标非输入框及其后代时才隐藏；
4. 简化事件委托：直接绑定 .input-text 的 click，而非依赖父级触发。

✅ 优化后的完整代码

  




  
    Click Input
    
      
        
          
        
      
    
  

⚠️ 关键注意事项

• e.stopPropagation() 在 $input.click() 中至关重要：防止点击输入框时事件冒泡到 document，继而触发 mouseup 隐藏逻辑（Firefox 尤其敏感）；
• 使用 $(e.target).closest('.input-text') 比 hasClass() 更健壮，可正确匹配子元素（如 包裹的 input）；
• 建议为 .block-content 添加 tabindex="-1" 并监听 blur 作为备选方案（适用于更复杂表单），但本例中 mouseup + closest 已足够可靠；
• jQuery 版本兼容性：示例使用 1

  

  .12.4（支持 IE9+），若项目已升级至 jQuery 3+，请将 $.live() 类写法替换为 $.on() 代理（本例无需）。

通过以上调整，Firefox 与 Chrome 行为完全一致：点击标题展开、点击输入框稳定聚焦、点击外部区域平滑收起——真正实现跨浏览器稳定的搜索交互体验。