时间戳

首页 > 解决方案 > onDoubleClick() 不适用于手机反应 js 应用程序

javascript - onDoubleClick() 不适用于手机反应 js 应用程序

问题描述

对每个人来说，我的 ReactJs 应用程序中存在分配给组件的 onDoubleClick() 函数的问题，在台式机上我的功能正常工作，但在 Android 手机上，（iPhone 工作正常）屏幕垂直不起作用，我手机中的屏幕无法将双击识别为我分配的功能，而是放大或缩小，我想用我的功能防止这种行为。

以下是我的代码的一部分，您可以在estebmaister.github.io/react-calendar/或同名的公共 repo 中看到该应用程序。

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

希望各位大神指点一下解决这个问题，谢谢。

标签： javascriptreactjsdom-eventsondoubleclick

解决方案

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

 

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

推荐阅读