本文详解如何修复 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 查询开销。
✅ 修复后的完整代码
<!DOCTYPE html>
<html>
<head>
<style>
.container {
max-width: 600px;
margin: 50px auto 0;
}
.block-title {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="block block-search">
<div class="block block-title"><strong>Click Input</strong></div>
<div class="block block-content" style="display: none;">
<div class="field search">
<div class="control">
<input id="search" type="text" name="q" placeholder="Search here..." class="input-text" style="padding: 8px;">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
const $content = $(".block-search .block-content");
$content.hide();
// 点击标题：切换内容区 + 立即聚焦输入框
$('.block-search .block-title').click(function() {
$content.toggle();
$content.find(".input-text").focus();
});
// 点击输入框：确保内容区可见 + 聚焦自身
$(".input-text").click(function(e) {
e.stopPropagation(); // 阻止事件冒泡至 document，避免触发 hide
$content.show();
$(this).focus();
});
// 全局 mouseup：仅当点击区域不包含 input 或其容器时才隐藏
$(document).mouseup(function(e) {
if (!$(e.target).closest('.block-search').length ||
$(e.target).is('.block-title')) {
// 点击标题或标题外区域 → 隐藏（但保留点击 input 时不触发）
if (!$(e.target).hasClass('input-text') &&
!$(e.target).closest('.input-text').length) {
$content.hide();
}
}
});
});
</script>
</body>
</html>⚠️ 关键注意事项
- e.stopPropagation() 至关重要：它阻止 .input-text.click 事件向上传播到 document，从而避免与 mouseup 监听器产生竞态；
- 推荐使用 .closest() 而非 .hasClass()：$(e.target).closest('.input-text') 能准确捕获 input 本身及其内部子元素（如 padding 区域）的点击，提升容错性；
- 避免 blur() 主动失焦：除非有特殊业务逻辑（如搜索提交后自动收起），否则不应在展开阶段主动调用 blur()；
- 兼容性延伸：该方案同样适用于 Safari 和 Edge，无需额外 polyfill。
✅ 总结
Firefox 对事件流的处理更严格，因此依赖“隐式行为”的 jQuery 交互容易失效。通过显式控制事件传播、精准判断点击上下文，并以 focus() 为核心驱动焦点状态，即可实现跨浏览器一致、稳定可靠的搜索框交互体验。建议在所有涉及动态显示/隐藏 + 输入聚焦的组件中，均采用此类防御性事件设计。
