FullCalendar v5.10.2 eventReceive事件处理器内存残留重复触发问题

针对你遇到的eventReceive重复触发问题，核心原因是外部事件的拖拽监听未随旧日历实例完全销毁，以下是具体解决步骤：

1. 完善销毁流程，覆盖外部事件清理 #

每次加载新日历前，除了销毁日历实例，还要主动清理外部事件的拖拽绑定：

// 全局存储当前日历实例引用
let currentCalendar = null;

function loadCalendar() {
  // 清理旧实例
  if (currentCalendar) {
    // 销毁日历实例
    currentCalendar.destroy();
    // 解除外部事件的拖拽绑定
    $('.external-event').draggable('destroy');
    // 清空日历容器，确保旧DOM完全移除
    $('#calendar-container').empty();
    // 清除实例引用
    currentCalendar = null;
  }

  // 加载新HTML内容并初始化
  $.get('calendar-content.html', function(html) {
    $('#calendar-container').html(html);
    
    // 初始化新日历实例
    currentCalendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
      // 你的日历配置
      eventReceive: function(info) {
        // 你的事件接收逻辑
        console.log('Event received:', info.event);
      },
      // 其他配置项...
    });
    currentCalendar.render();

    // 重新初始化外部事件拖拽（仅针对新加载的元素）
    $('.external-event').draggable({
      item: '.fc-event',
      revert: true,
      revertDuration: 0
    });
  });
}

2. 避免全局事件绑定 #

如果你的外部事件拖拽使用了全局事件监听（比如$(document).on(...)），会导致每次加载都新增监听，需改为元素级绑定+命名空间清理：

// 初始化时给拖拽事件添加命名空间
$('.external-event').draggable({
  // 配置项
}).on('dragstart.fullcal', function() {
  // 拖拽开始逻辑
});

// 清理时移除对应命名空间的所有事件
$('.external-event').off('.fullcal').draggable('destroy');

3. 验证DOM清理是否彻底 #

检查日历容器的DOM结构，确保旧的日历元素没有被隐藏保留在页面中（比如display: none但未移除）。使用$('#calendar-container').empty()或$('#calendar').remove()确保旧DOM完全删除。

关键说明 #

eventReceive的特殊性在于它依赖外部拖拽元素与日历的关联，而destroy()方法仅清理日历自身的内部监听，不会自动解除外部元素的拖拽绑定。因此必须手动清理这些外部绑定，才能避免旧实例的事件处理器被触发。

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