如何在第二次单击鼠标释放之前检测双击？

Question

React 元素有一个很好的 onDoubleClick 属性。但是它只会在用户第二次单击后释放鼠标时记录双击。

是否有另一个 prop 会在第二次单击后立即注册双击，而不是在用户第二次单击时松开鼠标后注册？

Answer 1

该活动不存在，但如果您需要，您可以编写它！

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>

如何在第二次单击鼠标释放之前检测双击？

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

html

javascript

css

double-click

reactjs