本文详解如何修复 jquery 实现的搜索框在 firefox 中点击输入框失焦、无法稳定聚焦的问题，通过优化事件绑定逻辑与条件判断，确保 chrome 与 firefox 行为一致。
在 Web 开发中，一个常见的交互需求是：点击标题展开搜索区域，点击输入框时保持其可见并自动获得焦点；同时，点击页面其他区域则收起搜索框。该逻辑在 Chrome 中往往能正常运行，但在 Firefox 中却容易出现「点击输入框后瞬间失焦/弹出又立即隐藏」的不稳定现象。根本原因在于 Firefox 对 mouseup/click 事件冒泡和目标判定更为严格，且原代码中存在两个关键缺陷：
- 重复触发隐藏逻辑：$(document).mouseup(...) 在输入框被点击时也会触发，而原判断未排除 .input-text 元素自身，导致刚显示就又被隐藏；
- 冗余 focus 调用与时机冲突：.blur() 强制失焦 + 后续 .focus() 在 Firefox 中易引发竞争，破坏聚焦稳定性。
✅ 正确解决方案
核心改进点如下：
- 移除不必要的 .blur() 调用；
- 将输入框 focus() 统一放在 .click() 处理器内，确保聚焦时机明确；
- 在全局 mouseup 中精准排除输入框及其子元素，避免误触发隐藏；
- 使用 e.target 判断时，推荐结合 closest() 提升容错性（兼容 label 包裹等场景）。
以下是优化后的完整代码：
$(document).ready(function() {
const $content = $(".block-search .block-content");
$content.hide();
// 点击标题：切换显示状态，并立即将焦点移至输入框
$('.block-search .block-title').click(function() {
$content.toggle();
$content.find('.input-text').focus();
});
// 点击输入框本身：确保显示并聚焦（防止因 toggle 延迟或 CSS 动画导致未显示即聚焦）
$('.input-text').on('click', function(e) {
e.stopPropagation(); // 阻止冒泡至 document，避免触发隐藏
$content.show();
$(this).focus();
});
// 点击页面任意处：仅当点击目标非搜索框区域时才隐藏
$(document).on('mouseup', function(e) {
if (!$content.is(e.target) &&
$content.has(e.target).length === 0 &&
!$(e.target).hasClass('input-text') &&
$(e.target).closest('.input-text').length === 0) {
$content.hide();
}
});
});? 注意事项与最佳实践
- 避免 toggle() + focus() 的竞态：Firefox 渲染更新略滞后于 JS 执行，建议先 show() 再 focus()，或使用 setTimeout(() => $input.focus(), 0) 微任务延后聚焦（如需更高兼容性）；
- 语义化结构增强可访问性：建议将 .block-title 改为 <button> 标签，并添加 aria-expanded 属性，配合 aria-controls 关联内容区；
- CSS 补充建议：为防止点击输入框时因 display: none → block 导致布局抖动，可改用 visibility: hidden + opacity: 0 配合 CSS 过渡动画，再用 pointer-events: none 控制交互可用性；
- 现代替代方案：若项目支持较新浏览器，可考虑用原生 Element.focus({ preventScroll: false }) 和 event.composedPath() 替代 jQuery，减少依赖。
通过以上调整，输入框在 Firefox 中的点击响应将变得完全稳定，聚焦行为与 Chrome 保持一致，且具备良好的可维护性与可扩展性。
