React OnClick/onTouchStart not working on real mobile touchscreen while working on desktop browser mobile simulator

Question

I have a simple button tag on a next.js main page.js file that alerts the window after clicking. The onClick function works on any desktop browser but doesn't work on any mobile browser.

"use client";

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

I tried both onClick and onTouchStart and also tried the button with "cursor: pointer" and nothing worked. This question might be a duplicated but the duplicate ones are unanswered. Any help would be appreciated.

Answer 1

Have you tried to put both onClick and onTouchStart? In an old project i did that:

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

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

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