在双击而无需Settimeout时，如何防止单击触发器

Question

堆栈溢出有类似的问题，但我没有找到适当的解决方案。

在双击的情况下，我不希望触发单个点击功能，并且我想在没有jQuery和settimeout的情况下进行存档。

这可以通过SettieMout实现，但是鼠标移动事件在延迟时间内被阻止。

代码：https：//codesandbox.io/s/vnrk3xk115

mouseDown = (e) => {
    // Case 1
    // In the case of double clicks, a single click will still trigger. 
    if (e.detail === 1) {
      console.log('Single Click');
    } else if (e.detail === 2) {
      console.log('Double Click');
    }
    // Case 2
    // In the case, I can't use mouse move for 250ms
    let timeoutID = null;
    if (!timeoutID) {
      timeoutID = setTimeout(() => {
        console.log('Single Click');
        timeoutID = null;
      }, 250);
    } else {
      timeoutID = clearTimeout(timeoutID);
      console.log('Double Click');
    }
  }
  mouseMove = () => {
    // Mouse move is blocked for 250ms
  } 

Answer 1

我认为Settimeout是必要的，但是您可以以不同的方式使用它。单击您的功能，然后使用超时将其重置以避免双击。

请查看以下内容：https://codesandbox.io/s/73n357xx36

如果我想到了这个想法，它应该适合您的需求。