onDoubleClick()不工作在电话反应js应用程序上

Question

对每个人来说，我的ReactJs应用程序中有一个问题: onDoubleClick()函数分配给组件，在桌面pc上，我的功能正常工作，但是在安卓手机上，(iPhone工作得很好)屏幕的垂直功能不起作用，我手机中的屏幕不识别双击作为我指定的函数，相反，它使放大或放大，我想用我的功能来防止这种行为。

下面是我的代码的一部分，您可以在_或公共回购中看到该应用程序的同名。

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

我希望你能给我一个解决这个问题的线索，谢谢。

Answer 1

当使用函数而不是类声明组件时，此解决方案适用于：

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

​

Answer 2

这是我的双击解决方案。请注意，onDoubleClick并不适用于几乎所有浏览器的移动版本。您需要使用onTapStart等等。但我想介绍一个简单的工作，我已经测试了Chrome，FireFox和Safari，它的工作非常完美。我通过onClick事件对img标记进行了双击。

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

在这里，我假设2次点击之间的时间差是250毫秒，你甚至可以把它增加到300，然而，在大多数浏览器中降低这个值是行不通的。