FullCalendar拖拽时eventDidMount频繁触发导致Tippy.js提示框异常如何解决

问题原因确认 #

你对问题的判断是准确的：FullCalendar拖拽事件时，事件元素会被反复销毁重建并触发eventDidMount钩子，导致重复创建Tippy实例，最终出现引用异常和大量冗余提示框。

可行解决思路 #

这里提供两种经过验证的方案，可根据实际需求选择：

• 方案1：全局拖拽状态标记，禁止拖拽过程中创建Tippy（推荐，性能损耗最低）
  逻辑很简单：新增一个变量标记当前是否处于拖拽状态，拖拽开始时标记为true，拖拽结束/取消时标记为false，eventDidMount钩子中只有非拖拽状态、且元素没有已挂载的Tippy实例时才创建新实例。
  代码示例：

  // 新增全局拖拽状态标记
  let isEventDragging = false;
  
  // FullCalendar 配置
  {
    // 其他初始化配置...
    eventDidMount: function(info) {
      // 拖拽状态下直接跳过，避免重复创建
      if (isEventDragging) return;
      // 已有Tippy实例也直接跳过，避免重复挂载
      if (info.el._tippy) return;
      
      tippy(info.el, {
        interactive: true, 
        delay: 300,
        theme: 'light-border',
        maxWidth: 400,
        allowHTML: true,
        appendTo: document.getElementById('mainContent'),   
        content(reference) {
            //Tooltip content
            return tempRendered;
        },
      });                                     
    },
    eventDragStart(info){
      // 标记开始拖拽，同时隐藏当前事件的已有Tippy
      isEventDragging = true;
      if (info.el._tippy) {
        info.el._tippy.hide();
      }
    },
    // 拖拽结束/取消时重置状态
    eventDragStop(info) {
      isEventDragging = false;
    },
    eventDrop(info) {
      isEventDragging = false;
    }
  }
  

• 方案2：拖拽开始时销毁当前事件的Tippy实例，拖拽结束后重建
  如果你的事件内容在拖拽过程中会发生变化，需要更新Tooltip内容，可以选择这个方案：拖拽开始时直接销毁当前事件的Tippy实例，拖拽结束后再触发重建即可。
  代码示例：

  {
    // 其他初始化配置...
    eventDidMount: function(info) {
      // 先销毁已有实例避免重复
      if (info.el._tippy) {
        info.el._tippy.destroy();
      }
      tippy(info.el, {
        interactive: true, 
        delay: 300,
        theme: 'light-border',
        maxWidth: 400,
        allowHTML: true,
        appendTo: document.getElementById('mainContent'),   
        content(reference) {
            return tempRendered;
        },
      });                                     
    },
    eventDragStart(info){
      if (info.el._tippy) {
        info.el._tippy.destroy();
      }
    }
  }
  

补充说明 #

Tippy创建的实例默认会挂载在绑定元素的_tippy属性上，通过这个属性可以直接调用hide()、show()、destroy()等官方API，无需额外存储实例引用。

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