Firefox 浏览器中点击输入框失焦闪退的稳定解决方案
本文详解如何修复 jquery 实现的搜索框在 firefox 中点击输入框后立即隐藏（失焦闪退）的问题，通过优化事件监听逻辑与焦点控制，实现 chrome 与 firefox 行为一致的稳定交互体验。
在 Web 开发中，一个常见的交互模式是：点击标题展开搜索区域，再点击输入框获得焦点并保持展开状态。然而，原始代码在 Firefox 中表现异常——当用户点击 时，.block-content 会瞬间显示又隐藏，造成“闪退”现象。根本原因在于 Firefox 的事件冒泡与 mouseup 全局监听逻辑冲突：点击 input 触发了 .input-text 的 click，紧接着触发 $(document).mouseup()，而此时 e.target 仍可能被判定为非 input 元素（尤其在 focus 状态切换过程中），导致 .block-content 被强制隐藏。
✅ 正确解决方案要点
- 移除冗余的 blur() 调用：原始代码中 $(".input-text").blur() 会主动移除焦点，干扰用户操作，且无实际必要；
- 统一使用 focus() 替代 click → focus 链式调用：点击 input 时直接聚焦，避免多层事件竞争；
- 精准判断 mouseup 隐藏条件：仅当点击目标完全不在 .input-text 及其父容器内时才隐藏，防止误判；
- 简化选择器，提升可维护性：使用 $(".input-text") 替代深层嵌套选择器，减少 DOM 查询开销。
✅ 修复后的完整代码
Click Input
⚠️ 关键注意事项
- e.stopPropagation() 至关重要：它阻止 .input-text.click 事件向上传播到 document，从而避免与 mouseup 监听器产生竞态；
- 推荐使用 .closest() 而非 .hasClass()：$(e.target).closest('.input-text') 能准确捕获 input 本身及其内部子元素（如 padding 区域）的点击，提升容错性；
- 避免 blur() 主动失焦：除非有特殊业务逻辑（如搜索提交后自动收起），否则不应在展开阶段主动调用 blur()；
- 兼容性延伸：该方案同样适用于 Safari 和 Edge，无需额外 polyfill。
✅ 总结
Firefox 对事件流的处理更严格，因此依赖“隐式行为”的 jQuery 交互容易失效。通过显式控制事件传播、精准判断点击上下文，并以 focus() 为核心驱动焦点状态，即可实现跨浏览器一致、稳定可靠的搜索框交互体验。建议在所有涉及动态显示/隐藏 + 输入聚焦的组件中，均采用此类防御*件设计。
