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

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

优化

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

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

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

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

移动端优化触摸优化

我来解答赞 13 收藏

反馈

2 条解答

轩辕怡企 Lv1

在移动端处理点击延迟，确实不用再依赖 fastclick 这种老方法了。现代浏览器和 React 已经有不少优化方案。

首先建议你检查一下你的项目有没有设置 viewport 的 width=device-width，这能解决大部分问题：

<meta name="viewport" content="width=device-width, initial-scale=1">

然后你的组件可以直接用 touch 事件来增强响应速度，但别直接改 onClick 为 onTouchStart，这样会破坏可访问性。更好的做法是同时监听 click 和 touchstart，用一个简单的防抖函数控制：

let lastClick = 0;



const handleTouch = (e) => {

  const now = Date.now();

  if (now - lastClick < 300) return;

  lastClick = now;

  console.log('clicked');

};



const MyButton = () => {

  return (

    <button 

      onClick={handleTouch} 

      onTouchStart={handleTouch}

      style={{ padding: '12px' }}

    >

      点我

    </button>

  );

};

这个写法既解决了延迟问题，又保证了可访问性。说实话，移动端交互这块确实让人头疼，但这种优雅的写法能让代码更干净。试一试吧，应该能解决你的问题。

2026-03-31 08:07

技术子源 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