如何在双击操作时不触发单击操作

• 如何在双击操作时不触发单击操作
  • 适用的场景
  • 核心思路
  • 具体实现
  • 如何在React中使用

适用的场景

针对于同一个dom元素同时存在单击和双击的相关交互需求

核心思路

1. 将单击handle函数放在一个setTimeout中执行,并在每次单击handle函数运行前clearTimeout确保单击handle函数不会被多次绑定；另外在双击handle函数运行前clearTimeout以在双击handle函数被执行前被取消
2. 将单双及事件的handle函数都放入一个setTimeout中，并在setTimeout外部初始化创建一个count=0标志位，用于在设定的timeOut时间内count的大小，如果是单数则执行单击handle，双数则执行双击handle

具体实现

// solution 1
let distinctTimer = null
const HandleSingleClick = () => {
  distinctTimer && clearTimeout(distinctTimer);
  distinctTimer = setTimeout(() => {
    onSingleClick(e);
  }, 200)
}

const HandleDoubleClick = () => {
  distinctTimer && clearTimeout(distinctTimer);
  onDoubleClick(e);
}

// solution 2
const handleSingleOrDoubleClick = () => {
  let clickCount = 0;
  clickCount += 1;
  setTimeout(()=>{
    if (clickCount === 1) onSingleClick(e);
    else if (clickCount === 2) onDoubleClick(e);
    clickCount = 0;
  }, 200)
}

如何在React中使用

可以将以上的解决方法封装成hook(下面的hook采用的事solution2)
具体实现可以参考use-double-click