Fullcalendar listWeek视图在iOS设备上的点击事件问题

我之前碰到过一模一样的问题！当时折腾了好一会儿才找到几个可行的解决方向，分享给你：

• 触摸事件被滚动行为拦截
  移动端的listWeek视图里，FullCalendar可能会把点击事件误判为滚动操作，导致eventClick无法触发。你可以尝试添加触摸事件的监听来手动触发回调，同时阻止默认的触摸行为：

  var calendar = new FullCalendar.Calendar(el, {
    // 其他基础配置
    views: {
      listWeek: {
        // listWeek视图专属配置
      }
    },
    eventClick: function(info) {
      // 你的原有业务逻辑
      console.log('Event clicked:', info.event.title);
    },
    // 添加触摸开始事件的监听
    eventTouchStart: function(info) {
      info.jsEvent.preventDefault(); // 阻止默认触摸滚动行为
      this.eventClick(info); // 手动调用eventClick的回调
    }
  });
  

  另外，也可以尝试全局禁用触摸事件的被动监听（如果你的页面没有特殊滚动需求）：

  document.addEventListener('touchstart', function() {}, {passive: false});
  

• 元素层级或可点击区域被遮挡
  切换到浏览器开发者工具的移动端模式，检查list视图中的事件元素：

  1. 查看是否有其他元素（比如自定义遮罩、工具栏）的z-index更高，覆盖了事件项；
  2. 检查事件元素的pointer-events属性是否被设置为none；
  3. 调整CSS确保事件项的整个区域都可点击：

     .fc-list-event {
       pointer-events: auto !important;
       z-index: 10;
     }
     

• 版本兼容性bug
  如果你使用的是FullCalendar v4及更早的版本，这个问题可能是官方已知的bug。建议升级到最新的稳定版（比如v6.x），新版本对移动端的触摸事件处理做了不少优化。升级后注意检查API是否有变动，比如eventClick的参数结构在新版本中可能略有调整。

• 排查回调函数本身的问题
  先给eventClick加一个简单的控制台输出，确认事件是否真的没有触发：

  eventClick: function(info) {
    console.log('Event click triggered!');
    // 原有业务逻辑
  }
  

  如果控制台能输出内容，说明是你的业务逻辑里存在移动端不兼容的代码（比如依赖桌面端专属的API、DOM操作出错等），需要逐行排查逻辑中的问题。

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