javascript - Javascript双击事件问题

我在DOM元素上有一个点击监听器（没有jQuery）：

element.addEventListener('click', (e) => {
// some code
});

显然，当我单击时，代码将运行并且一切都很好。

问题是，当我双击时，代码运行两次，并且我不希望出现这种情况（当我双击时，我希望它像单击鼠标一样运行一次代码）。

最佳答案

一种可能性是使用Date检查触发该功能的最后一次单击是否少于1秒：

const element = document.querySelector('div');
let lastClick = 0;
element.addEventListener('click', (e) => {
  const thisClick = Date.now();
  if (thisClick - lastClick < 1000) {
    console.log('quick click detected, returning early');
    return;
  }
  lastClick = thisClick;
  console.log('click');
});

<div>click me</div>

如果您希望函数正常运行仅在最后一次单击超过1秒之前运行（而不是最后一次函数正常运行超过一秒钟之前），请对其进行更改，以便将lastClick分配给if (thisClick - lastClick < 1000) {有条件的：

const element = document.querySelector('div');
let lastClick = 0;
element.addEventListener('click', (e) => {
  const thisClick = Date.now();
  if (thisClick - lastClick < 1000) {
    console.log('quick click detected, returning early');
    lastClick = thisClick;
    return;
  }
  lastClick = thisClick;
  console.log('click');
});

<div>click me</div>