how to detect double click before the mouse is released on the second clicked?-CodePudding

There is a nice onDoubleClick property for React elements. But it only registers the double click when the user release the mouse after the second click.

Is there another prop that will register the double click immediate after the second click and not after the user releases the mouse on the second click?

CodePudding user response：

The event does not exist, but if you need, you can program it!

const CLICK_INTERVAL = 500 // double click interval in ms

const App = () => {
  let lastClick = (new Date()).getTime()
  
  const handleMouseDown = () => {
    const msNow = (new Date()).getTime()
    console.info(msNow - lastClick)
    if ((msNow - lastClick) < CLICK_INTERVAL) {
      alert('Double!')
    }
    lastClick = msNow
  }

  return (
    <div>
      <button onMouseDown={handleMouseDown}>
        Click me
      </button>
    </div> 
  )
}


ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>