移动版Chrome在touch-action:none区域滚动后点击无响应问题求解

该问题是Chromium内核移动端浏览器的已知未修复缺陷，核心触发逻辑如下：

• 当元素设置touch-action: none后，Chrome会判定开发者将完全接管该区域的所有触摸交互，自动禁用内置的触摸手势默认处理逻辑
• 但Chrome的触摸事件分发链存在边界处理漏洞：用户在该元素上完成拖拽/滑动操作后，浏览器内部会残留未正确释放的「滚动手势锁定」标记
• 该标记默认会保留1~5秒，存续期间内的首次轻触操作会被浏览器误判定为滑动手势的延续，直接被拦截不触发交互；要么等待标记超时自动释放，要么第二次点击被识别为独立的tap事件，才能正常触发交互
• 该逻辑仅存在于Chromium内核的移动端浏览器，其他浏览器内核未实现同款手势锁定机制，因此不会复现问题。

• 方案1：缩小touch-action的限制范围，不要直接用none全量禁用，仅禁用你不需要的手势即可。比如仅需要禁用双指缩放、双击放大的场景，设置touch-action: pan-x pan-y即可，保留基础的滚动行为识别，不会触发锁定残留问题
• 方案2：如果必须使用touch-action: none，在该元素的触摸结束事件回调中手动清空锁定标记，参考代码：

const touchBlock = document.querySelector('你设置touch-action: none的元素选择器');
touchBlock.addEventListener('touchend', () => {
  // 主动触发一次全局pointerup事件，强制清空Chrome的手势锁定状态
  window.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, cancelable: true }));
});
touchBlock.addEventListener('touchcancel', () => {
  window.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, cancelable: true }));
});

• 方案3：给所有外部可交互元素（按钮、链接、输入框）添加touch-action: manipulation属性，该属性会告诉Chrome这些元素仅响应点击类操作，不需要参与滚动手势判定，优先级高于残留的锁定标记，会直接跳过拦截逻辑
• 方案4：全局监听触摸事件做兼容处理：记录用户最后一次在touch-action: none区域操作的时间，后续3秒内如果监听到可交互元素的touchstart事件，手动触发元素的click()方法补触发交互。

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