FullCalendar单元格内ADD按钮与事件点击冲突问题求助

这个问题的核心原因是你把ADD元素直接插入到了FullCalendar的事件容器（.fc-daygrid-day-events）里面——这个容器是FullCalendar专门用来管理事件点击交互的，插入新元素后不仅会覆盖事件的可点击区域，还会干扰FullCalendar的事件冒泡逻辑，最终导致eventClick无法正常触发。

下面给你两种可行的解决方案：

方案一：将ADD元素放到单元格的独立区域（推荐） #

把ADD元素放在事件容器之外的单元格区域，比如单元格底部的.fc-daygrid-day-bottom，这样既不会和事件区域重叠，也不会干扰事件的点击逻辑：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: '2021-11-07',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    eventClick: function(){
      alert("查看事件详情");//点击查看事件详情
    },
    dayCellDidMount: function (arg) {
      if (!arg.el.classList.contains("fc-day-sun") && !arg.el.classList.contains("fc-day-sat") && !arg.el.classList.contains("fc-day-past")) {
        // 定位到单元格底部的容器，而非事件容器
        var bottomContainer = arg.el.querySelector(".fc-daygrid-day-bottom");
        var addElement = document.createElement('div');
        addElement.className = 'text-center mt-2';
        addElement.innerHTML = '<span style="color:Gray" >ADD</span>';
        addElement.addEventListener('click', function(e) {
          // 阻止事件冒泡，避免触发单元格的dateClick
          e.stopPropagation();
          AddEvento();
        });
        bottomContainer.appendChild(addElement);
      }
    },
    events: [
      { title: 'All Day Event', start: '2021-11-01' },
      { title: 'Long Event', start: '2021-11-07', end: '2021-11-10' },
      { groupId: '999', title: 'Repeating Event', start: '2021-11-09T16:00:00' },
      { groupId: '999', title: 'Repeating Event', start: '2021-11-16T16:00:00' },
      { title: 'Conference', start: '2021-11-11', end: '2021-11-13' },
      { title: 'Meeting', start: '2021-11-12T10:30:00', end: '2021-11-12T12:30:00' },
      { title: 'Lunch', start: '2021-11-12T12:00:00' },
      { title: 'Meeting', start: '2021-11-12T14:30:00' },
      { title: 'Birthday Party', start: '2021-11-13T07:00:00' },
      { title: 'Click for Google', url: 'http://google.com/', start: '2021-11-19' }
    ]
  });
  calendar.render();
});

function AddEvento() {
  alert("添加事件"); //点击添加事件
};

方案二：保留在事件容器内，但修复事件冒泡和层级问题 #

如果你坚持要把ADD元素放在事件容器里，需要做两个关键调整：

1. 给ADD元素的点击事件添加stopPropagation()，避免它阻止事件元素的点击响应。
2. 调整ADD元素的样式，确保它不会完全覆盖事件区域（比如设置固定高度或者让事件区域部分可见）。

修改后的dayCellDidMount部分代码：

dayCellDidMount: function (arg) {
  if (!arg.el.classList.contains("fc-day-sun") && !arg.el.classList.contains("fc-day-sat") && !arg.el.classList.contains("fc-day-past")) {
    var theElement = arg.el.querySelectorAll(".fc-daygrid-day-frame > .fc-daygrid-day-events")[0]
    setTimeout(function () {
      var addHtml = '<div class="text-center mt-1" style="height:20px;"><span style="color:Gray" >ADD</span></div>';
      theElement.innerHTML = theElement.innerHTML + addHtml;
      // 给ADD元素绑定点击事件并阻止冒泡
      theElement.querySelector('.text-center').addEventListener('click', function(e) {
        e.stopPropagation();
        AddEvento();
      });
    }, 10)
  }
},

关键说明： #

• 方案一从根源上避免了区域重叠和事件冲突，是更稳定、易维护的做法。
• 使用addEventListener绑定点击事件比内联onclick更灵活，也更容易控制事件冒泡逻辑。
• 添加e.stopPropagation()可以防止ADD的点击触发单元格的dateClick或者干扰事件的eventClick。

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