Firefox浏览器中文本输入框点击不稳定问题求助（需兼容Chrome行为）

问题描述 #

需求是点击标题展开搜索面板后，点击输入框时保持面板稳定显示，当前代码在Google Chrome中可正常运行，但在Firefox浏览器中点击输入框后面板会立刻隐藏，无法正常输入。

问题根源 #

核心问题在于事件冒泡顺序和无条件的面板隐藏逻辑：

• Firefox中，点击输入框时，输入框的click事件执行后，事件会冒泡到document的mouseup事件，原代码中该事件会无条件隐藏面板，导致输入框刚显示就被隐藏。
• Chrome的事件处理机制使得输入框的show()暂时覆盖了hide()，但这属于浏览器行为差异，并非可靠实现。
• 原代码中标题点击事件里的blur()调用属于冗余操作，会干扰输入框的焦点状态。

解决方案 #

修改JavaScript代码，通过判断点击区域来控制面板的显示/隐藏，同时移除冗余逻辑：

修改后的完整代码 #

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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>

CSS（无需修改）

.container {
    max-width: 600px;
    margin: 50px auto 0;
}
.block-title{
    cursor: pointer;
}

JavaScript（关键修改）

$(document).ready(function(){ 
    // 缓存搜索面板元素，提升性能
    var searchPanel = $(".block-search .block-content");
    searchPanel.hide();
    
    // 点击标题切换面板显示状态
    $('.block-search .block-title').click(function(){ 
        searchPanel.toggle();
    });
    
    // 点击文档区域时，仅在点击面板外部才隐藏面板
    $(document).mouseup(function(e){
        // 判断点击目标是否不在面板内，且不是面板本身
        if (!searchPanel.is(e.target) && searchPanel.has(e.target).length === 0) {
            searchPanel.hide();
        }
    });
});

修改说明 #

1. 缓存DOM元素：将搜索面板元素缓存到变量中，避免重复DOM查询，提升性能。
2. 移除冗余逻辑：删除标题点击事件中的blur()调用，以及输入框的冗余click事件（点击输入框本身会自动获取焦点）。
3. 精准控制隐藏时机：在document.mouseup事件中，通过is()和has()方法判断点击目标是否属于搜索面板内部，只有点击面板外的区域才隐藏面板，彻底解决跨浏览器的事件冲突问题。

内容的提问来源于stack exchange，提问作者Gaurav