React触摸设备上onClick因轻微手指移动失效，求优化方案

问题背景 #

我用React开发触摸显示屏界面，按钮采用onClick事件，示例代码如下：

<button onClick={() => console.log('onClick')}>Hello!</button>

用户使用时发现触摸点击经常触发失败，用力多次点击反而更难触发。

通过以下代码测试触摸事件流：

['touchstart', 'touchmove', 'touchend', 'touchcancel'].forEach((x) => window.addEventListener(x, () => console.log(x)))

发现用户手指轻微移动就会触发touchmove事件，而Chrome中的onClick需要连续触发touchend且无touchmove才会触发，这就是点击失效的核心原因。我曾尝试用以下代码禁用touchmove，但效果不佳：

window.addEventListener('touchmove', (e) => {e.preventDefault(); e.stopImmediatePropagation()}, {passive: false})

我不想大面积重构代码改用onTouchEnd和onMouseUp，希望找到更简便的处理方式：能否修改onClick行为，让它忽略轻微的touchmove事件？

补充：该问题仅在Chrome中出现，Firefox无此异常。

可行解决方案 #

1. 自定义触摸兼容点击Hook（推荐） #

封装一个React Hook，通过判断触摸过程中的位移阈值，只触发有效点击逻辑，同时兼容鼠标操作，无需大幅修改现有代码：

import { useRef, useEffect } from 'react';

const useTouchClick = (handler, threshold = 5) => {
  const startX = useRef(0);
  const startY = useRef(0);

  const handleTouchStart = (e) => {
    startX.current = e.touches[0].clientX;
    startY.current = e.touches[0].clientY;
  };

  const handleTouchEnd = (e) => {
    const endX = e.changedTouches[0].clientX;
    const endY = e.changedTouches[0].clientY;
    const deltaX = Math.abs(endX - startX.current);
    const deltaY = Math.abs(endY - startY.current);
    
    // 位移小于设定阈值，判定为有效点击
    if (deltaX < threshold && deltaY < threshold) {
      handler(e);
    }
  };

  const handleClick = (e) => {
    handler(e);
  };

  return {
    onTouchStart: handleTouchStart,
    onTouchEnd: handleTouchEnd,
    onClick: handleClick
  };
};

// 使用示例
const MyButton = () => {
  const handleClick = () => {
    console.log('有效点击触发');
  };

  const touchClickProps = useTouchClick(handleClick);

  return <button {...touchClickProps}>Hello!</button>;
};

2. 调整Chrome触摸事件阈值（仅作参考） #

Chrome提供了隐藏配置项可修改触摸移动的判定阈值，但需要用户手动调整浏览器设置，无法覆盖所有用户：

• 在Chrome地址栏输入chrome://flags/#touch-event-emulation-touch-slop
• 增大Touch Event Emulation Touch Slop的值，轻微移动将不会触发touchmove

3. 使用第三方库 #

借助react-fast-click这类专门处理触摸点击的库，它会自动处理触摸位移判定，直接替换原有onClick即可：

import FastClick from 'react-fast-click';

// 使用示例
<FastClick onClick={() => console.log('点击触发')}>
  <button>Hello!</button>
</FastClick>

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