jQuery UI TimePicker插件下拉菜单自动关闭问题（仅FireFox）

我之前正好碰到过一模一样的问题！Firefox里点击TimePicker的下拉菜单刚弹出来就立刻关闭，根本没法选时间，但Chrome和IE完全正常——这大概率是Firefox对事件冒泡的处理逻辑和其他浏览器不一致导致的：当点击TimePicker下拉选项时，事件会冒泡到DatePicker的容器上，触发了DatePicker的外部点击关闭逻辑。下面是几个亲测有效的修复方案：

方案1：阻止TimePicker下拉菜单的事件冒泡 #

找到你初始化TimePicker的代码，给下拉菜单的选项添加mousedown事件的阻止冒泡处理。之所以用mousedown而不是click，是因为DatePicker通常是监听mousedown来判断是否点击了外部区域，在这个阶段阻止冒泡就能避免触发关闭逻辑：

// 适配你的TimePicker下拉选项选择器，通常是.ui-timepicker-list li
$('.ui-timepicker-list li').on('mousedown', function(e) {
    e.stopPropagation();
});

如果你的TimePicker是动态生成的，记得用事件委托来绑定：

$(document).on('mousedown', '.ui-timepicker-list li', function(e) {
    e.stopPropagation();
});

方案2：调整DatePicker的关闭触发逻辑 #

如果方案1不生效，可以在DatePicker的onClose回调里做判断：当点击的是TimePicker区域时，阻止DatePicker关闭或者重新打开它：

$(function() {
    // 替换成你的日期输入框ID
    $('#target-date-input').datepicker({
        // 你的DatePicker原有配置
        dateFormat: 'yy-mm-dd',
        onClose: function(dateText, inst) {
            // 检查点击的元素是否属于TimePicker容器
            var isTimePickerClick = $(event.target).closest('.ui-timepicker-container').length > 0;
            if (isTimePickerClick) {
                // 延迟10ms重新打开DatePicker，确保TimePicker的选择能正常完成
                setTimeout(() => {
                    $('#target-date-input').datepicker('show');
                }, 10);
            }
        }
    }).timepicker(); // 集成TimePicker
});

方案3：检查版本兼容性 #

如果你的jQuery UI TimePicker是比较老的版本，可能存在Firefox的兼容性bug。建议更新到最新版的TimePicker（注意要和你当前使用的jQuery、jQuery UI版本匹配），新版本通常会修复这类跨浏览器的事件处理问题。

另外也可以排查一下页面上有没有全局的mousedown或click事件监听，会不会是其他脚本干扰了TimePicker和DatePicker的事件触发。

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