如何用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('双击事件')
}
编写了测试代码,测试运行了多次,没发现问题,唔~,已成功地解决了该问题,完结撒花
结语
若小伙伴们有更好的解决办法,或发现任何问题,欢迎在评论区留言
转载自:https://juejin.cn/post/7148716250204471303