React移动端按钮点击总是有延迟怎么办？

a'ゞ俊杰提问于 2026-02-10 11:56:27 阅读 38

优化

我在用React开发移动端时，点击按钮总会延迟好几百毫秒才触发，试过加ontouchend和设置touch-action: none都没用，这是什么情况啊？


import { useState } from 'react';

function NavButton() {
  const [count, setCount] = useState(0);

  return (
    <button 
      style={{ touchAction: 'none' }}
      onClick={() => setCount(c => c + 1)}
    >
      点击次数：{count}
    </button>
  );
}

export default NavButton;

用真机测试时明明手指都离开屏幕了，计数器才突然跳动，这个300ms延迟到底怎么破？网上说的解决方案都不好使…

我来解答赞 6 收藏

反馈

2 条解答

♫诗谣 Lv1

用 fastclick 库，或者直接在 index.html 的 viewport 加上 width=device-width, initial-scale=1 搞定。

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

现代浏览器基本不用折腾 fastclick，配置好 viewport 就行。

2026-02-19 22:03

司空洛熙 Lv1

当时我也卡在这，整整一天都在折腾这个300ms延迟。你这情况根本不是React的问题，是浏览器在移动端默认加了点击延迟，为了判断是不是双击操作。别再折腾touch-action了，那个对click事件没用。

最直接的解法是把onClick换成onTouchEnd，但注意一点：你得手动处理点透和重复触发的问题。我给你个现成能用的方案：

import { useState } from 'react';



function NavButton() {

  const [count, setCount] = useState(0);



  const handleTouchEnd = (e) => {

    e.preventDefault(); // 阻止默认行为

    setCount(c => c + 1);

  };



  return (

    

  );

}



export default NavButton;

关键点有三个：第一，用onTouchEnd替代onClick；第二，加上e.preventDefault()防止误触；第三，CSS里设置touch-action: manipulation，这是专门用来消除按钮点击延迟的。别用none，会带来其他手势问题。

要是项目里按钮多，建议封装个useTouchEnd hook复用逻辑。我当时就是因为懒得封装，后来每个按钮都得改一遍，差点崩溃。

2026-02-10 12:01