本文解决 firefox 下点击输入框无法稳定获得焦点的问题，通过修正事件绑定逻辑与隐藏条件，确保与 chrome 一致的点击即聚焦、失焦自动收起行为。
在 Web 开发中，常见“点击标题展开搜索框 → 点击输入框自动聚焦”的交互模式。原始代码在 Chrome 中表现正常，但在 Firefox 中存在明显问题：点击输入框时内容区域可能闪退、焦点丢失或无法持续保持。根本原因在于 Firefox 对 mouseup 事件冒泡和元素判断更为严格，且原始逻辑中 .blur() 强制失焦与后续 .focus() 存在竞争，同时全局 $(document).mouseup() 未排除输入框自身，导致刚聚焦即被隐藏。
✅ 正确解决方案要点
- 移除冗余 .blur()：避免人为中断聚焦流程；
- 聚焦时机统一为 .focus()（非 .blur() 后再 .focus()）；
- 精准控制隐藏逻辑：仅当点击目标非输入框及其后代时才隐藏；
- 简化事件委托：直接绑定 .input-text 的 click，而非依赖父级触发。
✅ 优化后的完整代码
<!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; width: 100%;">
</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');
const $input = $('.block-search .block-content .input-text');
// 初始隐藏
$content.hide();
// 点击标题：切换显示 + 立即聚焦输入框
$('.block-search .block-title').click(function() {
$content.toggle();
if ($content.is(':visible')) {
$input.focus();
}
});
// 点击输入框本身：确保显示并聚焦（防 Firefox 失焦）
$input.click(function(e) {
e.stopPropagation(); // 阻止冒泡至 document，避免立即触发 hide
$content.show();
$(this).focus();
});
// 全局点击：仅当点击区域不包含 input-text 时隐藏
$(document).mouseup(function(e) {
if (!$(e.target).closest('.input-text').length &&
!$(e.target).closest('.block-content').length) {
$content.hide();
}
});
});
</script>
</body>
</html>⚠️ 关键注意事项
- 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 行为完全一致：点击标题展开、点击输入框稳定聚焦、点击外部区域平滑收起——真正实现跨浏览器稳定的搜索交互体验。
