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

慕容海宇 阅读 7

我在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事件机制有什么特别要注意的?

我来解答 赞 4 收藏
二维码
手机扫码查看
1 条解答
Mr-江梅
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去掉,现在大多数场景都不需要它了,省点折腾的时间去喝杯咖啡吧。
点赞 4
2026-02-16 19:21