FormKit 拖拽组件在 Safari MacOS 上的 TouchEvent 兼容性问题分析

问题背景

FormKit 是一个流行的前端表单构建工具库，其专业版提供了拖拽功能组件。近期有用户报告，在 Safari 17.2.1 版本的 MacOS 系统上，使用 Transfer List 组件时出现了 JavaScript 错误。

技术细节

问题的核心在于代码中对 TouchEvent 类型的检测方式。原代码使用了以下判断逻辑：

if (e.event instanceof TouchEvent) {
  state2.longTouch = false;
  clearTimeout(state2.longTouchTimeout);
}

这种检测方式在 Safari 浏览器上存在问题，因为 Safari 对 TouchEvent 的实现与其他浏览器不同，直接使用 instanceof 检测可能会导致类型判断失败。

影响范围

该问题主要影响：

• 使用 Safari 浏览器的 MacOS 用户
• 版本为 17.2.1 的 Safari
• 使用 FormKit 拖拽功能（特别是 Transfer List 组件）的应用

解决方案

FormKit 团队已经发布了修复版本：

• @formkit/pro 升级到 v0.119.6
• @formkit/drag-and-drop 依赖更新到 v0.0.06

修复方案可能采用了更健壮的类型检测方式，例如：

• 使用特征检测而非直接类型判断
• 添加浏览器特定的兼容代码
• 使用更通用的触摸事件处理逻辑

开发者建议

对于前端开发者处理类似浏览器兼容性问题时，建议：

1. 避免直接使用 instanceof 检测浏览器特定对象
2. 采用特征检测方式判断功能支持
3. 对于触摸事件处理，考虑使用更通用的指针事件API
4. 在跨浏览器开发时，充分测试各主流浏览器的表现

总结

浏览器兼容性问题是前端开发中的常见挑战，FormKit 团队快速响应并修复了这个 Safari 特有的 TouchEvent 检测问题，体现了对用户体验的重视。开发者在使用类似功能时，应当注意不同浏览器对Web API的实现差异，采用更健壮的检测方式确保功能在各种环境下都能正常工作。