关于单击与双击事件

鼠标的单击与双击都是我们常用的鼠标事件,然而这两个事件一起触发时便有了问题

---

问题

如下,我想在这个div中同时设置单击事件和双击事件，并让两者执行不同的处理函数

<div onclick="console.log('click')" ondbclick="console.log('dbclick')">
Test
</div>

但事实上,在单击这个div时,你会看到这样的输出:

click
click
dbclick

这意味着,每个双击事件将会触发两次单击事件以及一次双击事件,这让想用单双击来触发不同的事件的我就很为难了

---

解决

该问题的解决类似于函数节流，在进行点击后，借助setTimeout等待一段时间再执行单击事件，在该时间内，若没有进行下一次点击，就认为进行了单击，否则，就取消前面的定时器，转而触发双击事件

• 简单示例

let div = document.querySelector('.con');
let firstClick = false;
div.onclick = ()=>{
  if(!firstClick){
    firstClick = setTimeout(()=>{
      onClick();
      firstClick = false;
    },300);
  }
  else{
    clearTimeout(firstClick);
    onDoubleClick();
    firstClick = false;
  }
}
function onClick(){
  console.log('click');
}
function onDoubleClick(){
  console.log('double click');
}