如何实现调用后1秒内禁用window的mousedown eventListener？

架构老林

2026-8-3

解决mousedown事件1秒内重复触发的问题

你需要实现的是事件节流，防止短时间内重复触发导致异常。下面提供两种原生JS解决方案，都能满足你的需求：

方案1：使用时间戳（基于Date()实现）

通过记录上次触发的时间戳，每次触发时判断当前时间与上次的间隔是否超过1000ms，只有满足条件才执行核心逻辑。

// 存储上次触发事件的时间戳
let lastTriggerTime = 0;

window.addEventListener("mousedown", event => {
  const currentTime = Date.now();
  // 检查间隔是否小于1秒，是则直接返回
  if (currentTime - lastTriggerTime < 1000) {
    return;
  }
  // 更新上次触发时间
  lastTriggerTime = currentTime;

  const rememberContent = event.target.innerHTML;
  // 合并重复逻辑，简化代码
  const textToCopy = event.target.classList.contains('color') 
    ? event.target.dataset.hex 
    : event.target.innerHTML;
  
  navigator.clipboard.writeText(textToCopy);
  event.target.innerHTML = "<span>copied!</span>";
  setTimeout(() => {
    event.target.innerHTML = rememberContent;
  }, 1000);
});

方案2：使用状态锁（更直观的控制方式）

定义一个布尔变量标记当前是否允许触发事件，触发后立即锁定，1秒后自动解锁。

// 标记是否允许触发事件
let isTriggerAllowed = true;

window.addEventListener("mousedown", event => {
  if (!isTriggerAllowed) {
    return;
  }
  // 触发后立即锁定
  isTriggerAllowed = false;

  const rememberContent = event.target.innerHTML;
  const textToCopy = event.target.classList.contains('color') 
    ? event.target.dataset.hex 
    : event.target.innerHTML;
  
  navigator.clipboard.writeText(textToCopy);
  event.target.innerHTML = "<span>copied!</span>";
  setTimeout(() => {
    event.target.innerHTML = rememberContent;
    // 1秒后解锁，允许再次触发
    isTriggerAllowed = true;
  }, 1000);
});