FullCalendar 弹出窗口其他事件冲突

Question

希望有人能帮忙。

我正在使用resourceTimeGridDay运行FullCalendar v6。

使用“eventDidMount”事件渲染挂钩，我为每个事件的弹出窗口调用 JS 函数以显示事件的详细信息。弹出窗口在悬停时显示，我希望它保持可见，直到鼠标移出弹出窗口区域。我的工作正常，除非弹出窗口“下方”有事件，然后当我想与原始弹出窗口交互时，这会打开弹出窗口下事件的弹出窗口....

不管怎样，我确信我已经习惯了太多的弹出窗口了！这是我的“eventDidMount”调用的代码：

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);
                        });
        })
    
}

非常感谢任何指导。

Answer 1

function eventPopover(event) {
  $(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");
      $(this).off("mouseleave").next(".popover").on("mouseleave", function () {
          $(_this).popover('hide');
      });
  }).on("mouseleave", function () {
      var _this = this;
      setTimeout(function () {
          if (!$(".popover:hover").length) {
              $(_this).popover("hide");
          }
      }, 300);
  });
}

1. 删除了不必要的

   $(function () { ... })

   包装纸，因为 事件绑定已在 eventDidMount 内完成 回调。
2. 更改为

   $(".popover").on("mouseleave", ...)

   $(this).next(".popover").on("mouseleave", ...)

   具体来说 定位与当前事件相关的弹出窗口。
3. 使用

   $(this).off("mouseleave")

   删除之前附加的任何内容 mouseleave 事件处理程序，防止干扰新的 事件处理程序。

此修改应该可以帮助您实现所需的行为，即弹出窗口保持可见，直到鼠标移出弹出窗口区域，无论其下面发生什么事件。