如何在鼠标被释放第二次点击前检测到双击?

Question

React元素有一个很好的onDoubleClick属性。但是，只有当用户在第二次点击后释放鼠标时，它才会注册双击。

是否有另一个道具将在第二次点击后立即注册双击，而不是在用户在第二次点击时释放鼠标之后?

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>