FullCalendar v6 resourceTimeGridDay视图popover悬停冲突问题求助

我在使用FullCalendar v6的resourceTimeGridDay视图时，通过eventDidMount钩子调用自定义函数给每个事件添加Popover展示详情。目前已实现hover事件触发Popover显示、鼠标移出Popover区域后再隐藏的逻辑，但遇到一个问题：当Popover下方存在其他事件时，鼠标在原Popover上操作会触发下方事件的Popover，导致无法正常操作原Popover。

当前使用的eventPopover函数代码如下：

function eventPopover(event) {
    $(function () {
        $(event.el).popover({
            title: 'the title2',
            content: 'content',
            placement: 'bottom',
            html: true,
            trigger: 'manual',
            animation: true,
        }).on("mouseenter", function () {
                var _this = this;
                $(this).popover("show");
                $(".popover").on("mouseleave", function () {
                    $(_this).popover('hide');
                });
            }).on("mouseleave", function () {
                var _this = this;
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(_this).popover("hide");
                    }
                }, 300);
            });
    })
}

参考Meghshyam Sonar的解答后，出现了新问题：多个Popover会同时显示或无法正确关闭，导致界面交互混乱。

问题根源在于全局绑定$(".popover")事件会导致所有Popover互相干扰，且未正确处理事件委托和Popover的唯一性。可以通过以下步骤修复：

1. 为每个Popover添加唯一标识，避免全局选择器误操作其他事件的Popover
2. 使用事件委托替代直接绑定，防止重复绑定事件
3. 在显示新Popover前关闭所有已打开的Popover，避免叠加

修改后的代码如下：

function eventPopover(event) {
    const $eventEl = $(event.el);
    // 为当前事件元素添加唯一ID，用于关联Popover
    const eventId = `event-${event.event.id}`;
    $eventEl.attr('data-event-id', eventId);

    $eventEl.popover({
        title: 'the title2',
        content: 'content',
        placement: 'bottom',
        html: true,
        trigger: 'manual',
        animation: true,
        // 自定义容器，确保Popover与事件元素关联
        container: $eventEl
    })
    .on("mouseenter", function () {
        const $this = $(this);
        // 关闭所有其他已打开的Popover
        $('.popover').popover('hide');
        // 显示当前Popover
        $this.popover("show");
        // 为当前Popover添加事件标识
        $this.next('.popover').attr('data-event-id', eventId);
    })
    .on("mouseleave", function () {
        const $this = $(this);
        setTimeout(function () {
            // 只判断当前事件关联的Popover是否被hover
            if (!$(`.popover[data-event-id="${eventId}"]:hover`).length) {
                $this.popover("hide");
            }
        }, 300);
    });

    // 为Popover添加mouseleave事件，确保移出时关闭
    $(document).on("mouseleave", `.popover[data-event-id="${eventId}"]`, function () {
        $(`[data-event-id="${eventId}"]`).popover('hide');
    });
}

关键优化点： #

• 通过data-event-id将事件元素与对应的Popover绑定，避免全局选择器干扰
• 显示新Popover前关闭所有其他Popover，防止叠加显示
• 使用事件委托绑定Popover的mouseleave事件，避免重复绑定
• 自定义Popover的container为事件元素，确保层级和关联关系正确

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