本文介绍如何针对移动端设备优化 fullcalendar 的交互逻辑，通过区分 hover（桌面）与 click（移动）触发方式，配合防误触策略，实现「单击显示事件提示、双击打开编辑模态框」的精准操作体验。
本文介绍如何针对移动端设备优化 fullcalendar 的交互逻辑，通过区分 hover（桌面）与 click（移动）触发方式，配合防误触策略，实现「单击显示事件提示、双击打开编辑模态框」的精准操作体验。
在 FullCalendar 中，默认的 eventClick 回调会在任意设备上单击事件时立即触发，这在移动端极易造成误操作：用户本意是查看事件信息（如通过 popover 提示），却意外打开了编辑模态框。为提升移动端用户体验，应实现「单击展示详情、双击进入编辑」的分层交互逻辑。
✅ 核心解决方案：区分设备 + 双击检测 + 触发解耦
我们需将原 eventClick 的单击逻辑拆解，并引入双击判定机制。关键步骤如下：
- 设备类型判断：复用已有 UA 检测逻辑；
- 禁用默认单击行为（移动端）：避免首次点击即打开模态框；
- 实现双击检测：使用时间戳记录连续两次点击间隔（建议 ≤ 300ms）；
- 解耦 popover 与 modal 触发逻辑：eventDidMount 中按设备设置不同 trigger，eventClick 中仅响应双击。
以下是完整优化后的代码片段（仅展示关键修改部分）：
// 设备检测（保持原有逻辑）
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// 在 calendar 配置中修改 eventDidMount 和 eventClick
eventDidMount: function(info) {
if (isMobile) {
// 移动端：popover 改为 click 触发，便于查看基本信息
$(info.el).popover({
title: info.event.title,
placement: 'top',
trigger: 'click',
content: 'Período: ' + (info.event.groupId || '—'),
container: 'body',
delay: { show: 0, hide: 100 } // 快速显示，悬停后自动隐藏
});
} else {
// 桌面端：保留 hover 行为
$(info.el).popover({
title: info.event.title,
placement: 'top',
trigger: 'hover',
content: 'Período: ' + (info.event.groupId || '—'),
container: 'body'
});
}
},
// ⚠️ 关键：重写 eventClick，支持双击识别
let lastClickTime = 0;
eventClick: function(info) {
const currentTime = new Date().getTime();
const timeDiff = currentTime - lastClickTime;
if (isMobile && timeDiff < 300) {
// 双击：执行编辑逻辑
const eventObj = info.event;
$('#ModalAddmanut1').modal('show');
$('#ModalAddmanut1 #sidtaref').val(eventObj.extendedProps.Id || '');
$('#ModalAddmanut1 #titletar1').val(eventObj.extendedProps.Tarefa || '');
$('#ModalAddmanut1 #cortaref1').val(eventObj.extendedProps.cor || '');
// 重置计时器
lastClickTime = 0;
} else {
// 单击（移动端）：仅激活 popover（已由 eventDidMount 绑定），不打开 modal
// 桌面端仍可单击编辑（可选保留，或统一改为双击）
if (!isMobile) {
// 桌面端也启用双击（推荐一致性体验）
lastClickTime = currentTime;
} else {
lastClickTime = currentTime;
// 可选：手动触发 popover 显示（确保点击后立即可见）
$(info.el).popover('show');
}
}
}? 注意事项与增强建议
- Popover 自动关闭：移动端点击空白处或切换事件时，需手动销毁 popover 避免残留。可在 eventLeave 或全局点击监听中调用 $(el).popover('hide')；
- 触摸反馈优化：为提升感知，可在 eventClick 中添加轻量级视觉反馈（如 $(info.el).addClass('clicked').delay(200).removeClass('clicked')）；
- 兼容性兜底：若项目使用 Bootstrap 5+，请确保 Popover 初始化正确（可能需显式调用 .popover() 方法）；
- 无障碍支持：双击对部分残障用户不友好，生产环境建议提供「长按 1s 编辑」作为替代方案（通过 longPressDelay + 自定义事件处理）；
- 性能注意：避免在 eventDidMount 中重复初始化 popover；建议结合 eventEl 生命周期管理（如 eventUnmount 中销毁）。
通过以上改造，FullCalendar 在桌面端维持「悬停查看 + 单击编辑」的高效流程，在移动端则升级为「单击查看详情 + 双击编辑」的防误触设计，显著提升跨设备交互一致性与可用性。
