移动端点击延迟怎么解决？React里加了fastclick还是有卡顿

昊沅（打工版）提问于 2026-03-30 11:47:17 阅读 4

优化

我在做移动端 React 项目时，发现按钮点击后有明显延迟，大概300ms左右。查资料说是因为浏览器要判断是不是双击缩放，所以加了 fastclick 库，但效果不明显，有些地方甚至更卡了。

下面是我现在写的组件，就是个简单的按钮，绑定了 onClick。有没有更好的处理方式？比如用 touchstart 代替？但又怕影响可访问性……

const MyButton = () => {
  const handleClick = () => {
    console.log('clicked');
  };

  return (
    <button onClick={handleClick} style={{ padding: '12px' }}>
      点我
    </button>
  );
};

移动端优化触摸优化

我来解答赞 1 收藏

反馈

1 条解答

技术子源 Lv1

其实移动端点击延迟问题很常见，fastclick有时候确实不太灵。我建议你试试这个方案，直接用 touchstart 替代 click，同时为了兼顾可访问性，我们再加个 keyboard 事件。

复制这个代码：

const MyButton = () => {

  const handleInteraction = (e) => {

    console.log('interaction');

    // 这里可以阻止默认行为避免重复触发

    if (e.type === 'keydown' && e.key !== 'Enter') return;

  };



  return (

    <button 

      onClick={handleInteraction}

      onKeyUp={handleInteraction}

      onTouchStart={handleInteraction}

      style={{ padding: '12px', cursor: 'pointer' }}

      role="button"

      tabIndex={0}

    >

      点我

    </button>

  );

};

这样处理后，基本能解决300ms延迟问题，而且保留了键盘交互支持。记得测试下各种场景，特别是安卓机，有时候表现会不一样。

唉，移动端兼容真是个体力活，不过这个方案应该够用了。

2026-03-30 12:02