
本文解决 firefox 下点击输入框无法稳定获得焦点的问题,通过修正事件绑定逻辑与隐藏条件,确保与 chrome 一致的点击即聚焦、失焦自动收起行为。
在 Web 开发中,常见“点击标题展开搜索框 → 点击输入框自动聚焦”的交互模式。原始代码在 Chrome 中表现正常,但在 Firefox 中存在明显问题:点击输入框时内容区域可能闪退、焦点丢失或无法持续保持。根本原因在于 Firefox 对 mouseup 事件冒泡和元素判断更为严格,且原始逻辑中 .blur() 强制失焦与后续 .focus() 存在竞争,同时全局 $(document).mouseup() 未排除输入框自身,导致刚聚焦即被隐藏。
✅ 正确解决方案要点
- 移除冗余 .blur():避免人为中断聚焦流程;
- 聚焦时机统一为 .focus()(非 .blur() 后再 .focus());
- 精准控制隐藏逻辑:仅当点击目标非输入框及其后代时才隐藏;
- 简化事件委托:直接绑定 .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 行为完全一致:点击标题展开、点击输入框稳定聚焦、点击外部区域平滑收起——真正实现跨浏览器稳定的搜索交互体验。










