鼠标的单击与双击都是我们常用的鼠标事件,然而这两个事件一起触发时便有了问题
问题
如下,我想在这个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');
}
