在桌面浏览器移动模拟器上工作时，React OnClick/onTouchStart 无法在真正的移动触摸屏上工作

Question

我在 next.js main page.js 文件上有一个简单的按钮标签，单击后会提醒窗口。 onClick 函数适用于任何桌面浏览器，但不适用于任何移动浏览器。

"use client";

export default function Page() {
  return (
    <button onClick={() => window.alert("Hello!")}>
      Hello!
    </button>
  );
}

我尝试了 onClick 和 onTouchStart，还尝试了带有“光标：指针”的按钮，但没有任何效果。 这个问题可能是重复的，但重复的问题没有得到解答。任何帮助将不胜感激。

Answer 1

您是否尝试过同时放置

onClick

和

onTouchStart

？ 在一个旧项目中我这样做了：

  const onClickHandler = () => {
      window.alert("Hello!")
  };

  const onTouchStartHandler = (event) => {
      event.preventDefault();
      onClickHandler();
  };

  return (
      <button onClick={onClickHandler} onTouchStart={onTouchStartHandler}>
          CLICK
      </button>
  );