Immich项目Web端触控滚动导致资产误选问题解析

问题背景

在Immich项目的Web界面中，用户在使用触控设备浏览时间线视图时发现了一个交互问题。当用户尝试通过上下滑动来滚动页面时，如果滑动动作起始于某个资产(asset)上，系统会错误地触发点击事件，导致该资产被意外选中或取消选中。

技术分析

这个问题属于典型的"触摸事件冲突"场景，在Web开发中较为常见。其核心原因在于：

1. 事件传播机制：现代浏览器中，触摸操作会依次触发touchstart、touchmove和touchend事件。当touchmove的位移量较小时，浏览器可能会将其解释为点击(tap)事件。

2. 滚动与选择冲突：在时间线视图的实现中，资产选择和页面滚动两种交互逻辑没有做好隔离。当用户意图滚动页面时，系统错误地将初始触摸点解释为选择意图。

3. 响应式设计考量：这个问题在移动端尤为明显，因为移动设备屏幕较小，用户操作空间有限，更容易在资产上开始滑动操作。

解决方案

针对这类问题，通常有以下几种技术解决方案：

1. 事件阈值判断：通过计算touchmove事件的位移量，当超过一定阈值时判定为滚动意图，忽略后续的点击事件。

2. 时间延迟处理：引入短暂延迟来判断用户操作意图，如果是快速轻触则视为点击，持续滑动则视为滚动。

3. 交互逻辑分离：将选择操作改为需要明确的长按或双击等不易与滚动混淆的交互方式。

在Immich项目的具体实现中，开发团队采用了第一种方案，通过精确计算触摸位移来区分滚动和选择操作。

影响范围

该问题主要影响以下使用场景：

• 在平板电脑或触摸屏笔记本上使用浏览器访问Immich Web端
• 使用手机浏览器访问时的触控操作
• 任何支持触摸输入的设备上的Web浏览体验

最佳实践建议

对于开发类似Web应用时，建议：

1. 统一交互范式：确保触摸交互在整个应用中保持一致，避免不同页面有不同的触摸处理逻辑。

2. 充分测试：在各种触控设备上进行全面测试，包括不同尺寸的屏幕和不同触摸精度的设备。

3. 渐进增强：为触摸和非触摸设备提供最优化的交互方式，确保良好的可访问性。

Immich团队通过快速响应和修复这个问题，展现了其对用户体验的重视，也为其他类似项目提供了有价值的参考案例。