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.

which mobile phone? Android or iPhone? Could you provide content of this td? — Adrian Naranjo, Apr 21 '20 at 18:40
Check in your index.html if you have `` user-sacalable=no -> prevents zoom in/out in mobile — Adrian Naranjo, Apr 21 '20 at 18:47
Of course, the problem is in Android phone, it works in iPhone. — Esteban Camargo, Apr 21 '20 at 18:51
I'm gonna try your solution @AdrianNaranjo my index.html was `` — Esteban Camargo, Apr 21 '20 at 18:54
@AdrianNaranjo Your solution works for the initial problem, but it generates other, I can´t make pinch-in or pinch-out gestures on the phone. — Esteban Camargo, Apr 21 '20 at 19:04
I can't replicate this problem... I have both of mobiles (android and iPhone and it works in both) Maybe in Andoid depends of brand and gestures that they use. In my android, I can double tap without any problem... Try it in other device — Adrian Naranjo, Apr 21 '20 at 20:18
Thanks, @AdrianNaranjo for the try, I will continue learning about this events and if I found an answer I will let you know. — Esteban Camargo, Apr 22 '20 at 01:59

score 2 · Answer 1 · answered Mar 03 '22 at 12:23

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)}></>

MJBZA · Answer 2 · 2021-04-26T11:19:05.660

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.

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

2 Answers2