如何修复FullCalendar点击叉号删除事件在手机端无响应的问题

• FullCalendar 移动端默认开启了事件拖拽、长按选择等触控交互，会优先拦截消耗触控事件，阻止自定义按钮的click事件向上冒泡触发
• 直接绑定onclick事件在移动端触控场景下优先级低于原生touchstart/touchend事件，容易被上层元素拦截无法触发
• 你使用了float-right的浮动布局，移动端可能存在触控区域判定偏移，导致点击没有命中绑定了事件的元素
• 原代码存在取值逻辑疏漏：背景色判断时取的event.backgroundColor路径错误，正确应该从event.event下取对应属性，部分移动端浏览器严格模式下该判断失效也会导致事件绑定失败

替换原eventDidMount配置为如下代码即可：

eventDidMount: function(event){
  const currentEvent = event.event;
  // 修正背景色取值路径
  if(currentEvent.backgroundColor === "#0000FF"){
    const eventId = currentEvent.id;
    const eventEl = event.el;
    const mainFrame = eventEl.querySelector('.fc-event-main-frame');
    const closeIcon = `<i class="fa fa-times" aria-hidden="true"></i>`;
    const closeBtn = document.createElement('div');
    // 增加内边距扩大触控区域，移动端最小建议点击区域为48px，同时提升层级避免被遮挡
    closeBtn.className = 'close-event float-right';
    closeBtn.style.cssText = 'padding: 8px; cursor: pointer; z-index: 10; position: relative;';
    closeBtn.innerHTML = closeIcon;
    mainFrame.insertBefore(closeBtn, mainFrame.firstChild);

    // 统一处理点击和触控事件，兼容PC和移动端
    const handleRemove = (e) => {
      // 阻止事件冒泡到日历父容器，避免触发日历默认的事件选中、拖拽逻辑
      e.stopPropagation();
      e.preventDefault();
      console.log("cross clicked");
      const targetEvent = calendar.getEventById(eventId);
      targetEvent?.remove();
    };
    // 同时绑定两种事件，兼容全端
    closeBtn.addEventListener('click', handleRemove);
    closeBtn.addEventListener('touchend', handleRemove);
  }
},

如果调整后仍失效，请确认：

• 移动端弹窗内的FullCalendar实例的calendar变量引用正确，没有错用PC端隐藏的实例
• 弹窗的根元素没有设置touch-action: none之类的全局拦截触控的CSS属性

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