深入浅出javaScript类型（一）

前言

如何用JavaScript区分双击和单击事件呢？我一度认为这个问题很简单，但是，越简单的任务，越是有问题，在这篇文章里，我将和大家分享下我踩过的坑，以及最后是如何解决该问题

坑一

用变量isDoubleClick和定时器setTimeout记录是否为双击事件，如下代码所示：

var isDoubleClick = false;
var $canvas = document.querySelector('.ss-canvas');

$canvas.addEventListener("click", handleSingleClick);
$canvas.addEventListener("dblclick", handleDoubleClick);

function handleSingleClick() {isDoubleClick = false;setTimeout(() => {if (isDoubleClick) return;console.log('单击事件')}, 200)
}
function handleDoubleClick() {isDoubleClick = true;console.log('双击事件')
} 

遗憾的是，仍然偶尔会在打印双击事件之后，再次打印单击事件

坑二

采用计数器clickTimer，将双击和单击事件放在同一个入口函数里，结合定时器setTimeout来处理，如下代码所示：

var $canvas = document.querySelector('.ss-canvas');
var clickTimer=0;
$canvas.addEventListener("click", handleCommonClick);
$canvas.addEventListener("dblclick", handleCommonClick);

function handleCommonClick() {clickTimer++;setTimeout(() => {if (clickTimer === 1) {handleSingleClick(e)} else {handleDoubleClick(e)}clickTimer = 0;}, 300)
}

function handleSingleClick() {console.log('单击事件')
}
function handleDoubleClick() {console.log('双击事件')
} 

再次失败，仍然会偶尔出现双击时，触发单击事件的问题

小结：两个坑的问题原因，大概是因为双击事件第二次点击之后，单击事件却误认为触发了它，所以它顽固地执行了

完美的解决办法

现代版本的浏览器，可以用event.detail来区分是单击，还是双击事件，如下代码所示：

element.onclick = (event) => {if (event.detail === 1) {// ...} else if (event.detail === 2) {// ...}
}; 

但请注意，当你双击时，你仍然需要使用定时器setTimeout来阻止第一次的单击事件，再使用event.detail来阻止第二次的单击事件，完整代码如下所示：

var $canvas = document.querySelector('.ss-canvas');
var clickTimer = null;

$canvas.addEventListener("click", handleOnlySingleClick);
$canvas.addEventListener("dblclick", handleOnlyDoubleClick);

function handleOnlySingleClick() {if (event.detail === 1) {clickTimer = setTimeout(() => {handleSingleClick(event)}, 200)}
function handleOnlyDoubleClick() {clearTimeout(clickTimer)handleDoubleClick(event)
}
function handleSingleClick() {console.log('单击事件')
}
function handleDoubleClick() {console.log('双击事件')
} 

编写了测试代码，测试运行了多次，没发现问题，唔~，已成功地解决了该问题，完结撒花

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享