我之前也遇到过这个问题——双击绑定了click事件的元素会触发两次处理函数，确实挺闹心的。给你几个靠谱的解决办法：

方法一：防抖函数（Debounce） #

防抖的核心思路是设置一段延迟时间，在这段时间内如果再次触发事件，就重置定时器；只有当延迟时间结束后没有新的触发，才执行目标函数。这样就能过滤掉双击时的第二次点击触发。

修改你的代码如下：

// 封装防抖工具函数
function debounce(func, delay = 300) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// 用防抖函数包装你的nextStep
const debouncedNextStep = debounce(() => {
  console.log("NEXT");
});

然后更新div的事件绑定：

<div onclick="debouncedNextStep()">test</div>

这里设置300ms延迟是因为系统默认的双击间隔大概在300-500ms区间，你可以根据实际需求调整这个数值。

方法二：直接区分单击与双击事件 #

如果你的场景不需要响应双击操作，可以通过记录上次点击的时间戳，判断两次点击的间隔来过滤双击触发：

let lastClickTimestamp = 0;

function nextStep() {
  const currentTime = Date.now();
  // 两次点击间隔小于300ms判定为双击，直接返回不执行逻辑
  if (currentTime - lastClickTimestamp < 300) {
    return;
  }
  lastClickTimestamp = currentTime;
  console.log("NEXT");
}

这样双击时第二次点击会因为时间差太短被直接跳过，只有单次点击才会执行目标逻辑。

方法三：改用addEventListener绑定事件（推荐） #

内联onclick虽然简单，但灵活性较差。改用addEventListener可以把逻辑和HTML结构分离，也更方便结合防抖等逻辑：

// 获取目标div元素
const targetDiv = document.querySelector('div');

// 防抖函数封装
function debounce(func, delay = 300) {
  let timer;
  return function(event) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(event);
    }, delay);
  };
}

// 原业务函数
function nextStep() {
  console.log("NEXT");
}

// 绑定防抖后的点击事件
targetDiv.addEventListener('click', debounce(nextStep));

这种方式代码更易维护，后续扩展其他事件处理逻辑也更方便。

内容的提问来源于stack exchange，提问作者Trombone0904