时间戳

首页 > 解决方案 > Javascript双击事件问题

javascript - Javascript双击事件问题

问题描述

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

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

显然，当我单击时，代码运行并且一切正常。

问题是当我双击时，代码运行两次，我不希望这种行为（当我双击时，我希望它像单击一样运行一次代码）。

标签： javascript

解决方案

一种可能性是用于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 秒前运行（而不是最后一次函数正常运行超过 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>

推荐阅读