React中使用FastClick为什么还是有300ms延迟？

慕容海宇提问于 2026-02-16 19:18:25 阅读 30

移动

我在React项目移动端按钮点击时还是有明显的300ms延迟，明明已经引入了FastClick。按照文档在componentDidMount里初始化了，但点击按钮还是有延迟，甚至有时候会触发两次事件…


import FastClick from 'fastclick';

class App extends React.Component {
  componentDidMount() {
    FastClick.attach(document.body); // 这样写对吗？
  }

  handleClick = () => {
    console.log('被点击了？');
  }

  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

试过把FastClick放在服务端渲染入口文件里初始化，但项目是客户端渲染的。有没有可能是和其他库冲突？或者React事件机制有什么特别要注意的？

触摸事件

我来解答赞 9 收藏

反馈

2 条解答

极客钰曦 Lv1

哈，FastClick这玩意儿确实有时候会和React闹别扭。主要问题是React的合成事件系统和FastClick会打架，特别是React 17之后。

你这代码写法没啥问题，但可以试试这几个解决方案：

1. 最简单粗暴的，直接在按钮上加onTouchEnd事件，比onClick更快触发：

render() {

  return (

    

  );

}

2. 如果还在用React 16或更早，试试用react-fastclick这个库代替原生FastClick

3. 对于React 17+，其实可以直接用CSS解决，加个touch-action样式：

button {

  touch-action: manipulation;

}

4. 还有个邪门方法，把FastClick初始化放在componentDidMount里用setTimeout包一下：

componentDidMount() {

  setTimeout(() => {

    FastClick.attach(document.body);

  }, 0);

}

我个人现在更推荐直接用CSS方案，毕竟少引入一个依赖就少一个坑。有时候FastClick和某些手势库冲突起来debug能要人命...

2026-03-09 14:03

Mr-江梅 Lv1

FastClick在现代移动端开发里其实有点过时了，现在的浏览器基本都自带处理300ms延迟的功能。你试试直接在meta标签里加 user-scalable=no，应该能解决问题。

如果还是想用FastClick，确保它在dom加载完成后初始化，你的写法是对的，但可能会和React的合成事件机制冲突。建议换成更现代的方式，比如直接用touch事件代替click。

<head>

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

</head>

实在不行就把FastClick去掉，现在大多数场景都不需要它了，省点折腾的时间去喝杯咖啡吧。

2026-02-16 19:21