onDoubleClick() don't work on phone react js app

Question

To everyone, I have a problem in my ReactJs app with the onDoubleClick() function assigned to a component, on a desktop pc my function works correctly, but on an Android mobile phone, (iPhone works fine) with the screen in vertical the function doesn't work, the screen in my phone doesn't recognize the double click as my assigned function, instead, it makes zoom in or zoom out, I want to prevent this behavior with my function.

Below is part of my code, and you can see the app in estebmaister.github.io/react-calendar/ or in the public repo with the same name.

      onDoubleClick = (event) => {
        this.setState({
          popperAnchor: Boolean(this.popperAnchor) ? null : event.currentTarget,
        });
      };
      render() {
    return (
      <td
        key={"d" + this.props.day}
        className={`calendar-day ${this.props.currentDay}`}
        onDoubleClick={this.onDoubleClick}
      >

I hope you can give me a clue to fix this problem, thanks.

Answer 1

Here is my solution for double click. Please note that onDoubleClick does not work in mobile version of almost all browsers. And you need to use onTapStart and so on. But I would like to introduce a simple work around that I have tested in Chrome, FireFox and Safari and it works perfect. I made a double click via onClick event for a img tag.

render() => {
this.watingClick = null; // a reference to timeout function
this.lastClick = 0; // a watchdog for difference between 2 clicks
    return ( <img
             onClick={(e) => {
              if (
                this.lastClick &&
                e.timeStamp - this.lastClick < 250 &&
                this.watingClick
              ) {
                this.lastClick = 0;
                clearTimeout(this.watingClick);
                console.log("Do the steps to respond double click");
                this.watingClick = null;
              } else {
                this.lastClick = e.timeStamp;
                this.watingClick = setTimeout(() => {
                  this.watingClick = null;
                  console.log("Do the steps to respond single click");
                }, 251);
              }
            }}
            />
     );
}

Here, I assumed time difference between 2 clicks is 250 mili seconds, you can increase it even to 300, however, decreasing this value in most browsers does not work.

Answer 2

this solution works for when declaring components using functions rather than classes:

 

    
  ....some code...
  const [waitingClick, setWaitingClick] = 
  useState(null);
  const [lastClick, setLastClick] = useState(0);
  const processClick = (e) => {
    if(lastClick&&e.timeStamp - lastClick < 250 && 
  waitingClick){
      setLastClick(0);
      clearTimeout(waitingClick);
      setWaitingClick(null);
      console.log('double click')}
      else{
        setLastClick(e.timeStamp);
        setWaitingClick(setTimeout(()=>{
        setWaitingClick(null);
        }, 251))
        console.log('single click')
        
      }
      
    }
 ....some code...
  <component  onClick={(e)=>processClick(e)}></>