本文详解如何修复 jquery 实现的搜索框在 firefox 中点击输入框后立即隐藏（失焦闪退）的问题，通过修正事件冒泡逻辑与 focus 时机，实现 chrome 与 firefox 行为一致的稳定交互体验。
在 Web 开发中，一个常见的交互模式是：点击标题展开搜索区域，再点击输入框使其获得焦点并保持展开状态。然而，原代码在 Firefox 中表现异常——用户点击 后，.block-content 会瞬间 hide()，导致输入框“闪退”，无法正常输入。根本原因在于 Firefox 对 mouseup 事件的触发时机更严格，且原逻辑未阻止事件冒泡与误判。
? 问题根源分析
-
blur() 强制调用破坏用户体验：
原代码在标题点击时执行 $(".input-text").blur()，不仅无必要，反而在 Firefox 中可能触发意外失焦，干扰后续 focus 流程。 -
$(document).mouseup 全局监听缺乏精准过滤：
原逻辑 $(document).mouseup(...) 在任意位置点击都会隐藏内容区，包括点击输入框本身——而 Firefox 中，mouseup 在 上触发后，紧接着执行 hide()，导致刚 show 出来的输入框被立即隐藏。 -
.focus() 调用时机不当：
在 .click() 回调中异步 focus 输入框，若 DOM 尚未完全可见（尤其在 toggle() 过渡中），Firefox 可能拒绝聚焦，造成 focus 失败。
✅ 正确解决方案
关键改进点：
- 移除冗余的 blur()；
- 使用 e.target 精准判断点击是否发生在输入框内部；
- 在 .click() 中先 show() 再 focus()，确保 DOM 可见性；
- 避免对输入框本身触发隐藏逻辑。
以下是优化后的完整代码：
$(document).ready(function() {
var $content = $(".block-search .block-content");
$content.hide();
// 点击标题：切换显示 + 立即聚焦输入框
$('.block-search .block-title').click(function() {
$content.toggle();
$content.find(".input-text").focus(); // 确保聚焦已显示的输入框
});
// 点击输入框：强制显示 + 聚焦（防 Firefox 失焦）
$(".input-text").on('click', function(e) {
e.stopPropagation(); // 阻止冒泡至 document，避免被 mouseup 拦截
$content.show();
$(this).focus();
});
// 全局点击隐藏：仅当点击非输入框区域时生效
$(document).on('mouseup', function(e) {
if (!$(e.target).closest('.input-text').length &&
!$(e.target).closest('.block-search').length) {
$content.hide();
}
});
});? 小技巧：使用 .closest() 替代 .hasClass() 更健壮——它能正确识别点击目标是否为输入框或其任意祖先（如 .block-search），防止误关。
? 注意事项与最佳实践
- 不要依赖 toggle() 后立刻 focus()：若需动画过渡，建议改用 fadeIn()/slideDown() 并在回调中 focus；
-
禁用移动端长按选中文本干扰（可选）：为 .input-text 添加 CSS：
.input-text { -webkit-user-select: text; -moz-user-select: text; user-select: text; } - 语义化增强：为 .block-title 添加 role="button" 和 tabindex="0"，支持键盘访问（无障碍必备）；
- jQuery 版本兼容性：示例使用 1.12.4，若升级至 3.x，请将 $.browser 相关逻辑替换为特性检测（本例无需）。
通过以上调整，该搜索组件在 Chrome、Firefox、Edge 及主流移动端浏览器中均能保持一致、稳定的点击聚焦行为——点击标题展开，点击输入框不关闭、立即可编辑，全局点击空白处才收起，真正实现跨浏览器鲁棒交互。
