如何让收藏按钮双击时仅触发一次事件？不使用removeEventListener

嘿，我懂你的困扰——双击收藏按钮时事件莫名触发两次，但又不能移除监听器，毕竟还要支持用户每次正常点击都能调出收藏列表对吧？这里有几个实用的解决方案，你可以挑适合自己代码的来用：

解决方案1：利用事件的detail属性（最简单） #

浏览器的click事件对象里有个detail属性，它会记录连续点击的次数：单击时是1，双击时第二次click事件的detail是2。我们可以利用这一点，只处理detail为1的情况，这样双击时的第二次触发就会被跳过，自然只执行一次事件逻辑。

// 包装你的addFavorites函数
function handleFavoriteClick(event) {
  // 如果是连续点击（次数大于1），直接跳过
  if (event.detail > 1) return;
  // 执行原本的收藏逻辑
  addFavorites();
}

// 给按钮绑定处理函数
const favoriteBtn = document.getElementById('your-favorite-button-id');
favoriteBtn.addEventListener('click', handleFavoriteClick);

这个方案代码量最少，逻辑也直观，主流浏览器都支持，优先推荐～

解决方案2：防抖函数（更灵活） #

防抖函数的核心是：在一段短时间内（比如200ms，刚好覆盖双击的间隔），只允许事件逻辑执行一次。第一次点击会立即执行，之后的连续点击（双击）会被忽略，直到时间间隔过了才允许下次触发。

// 封装一个防抖工具函数
function debounce(func, delay = 200) {
  let timeoutId;
  return function(...args) {
    // 如果已经有定时器，说明是连续点击，直接返回不执行
    if (timeoutId) {
      clearTimeout(timeoutId);
      timeoutId = null;
      return;
    }
    // 立即执行目标函数
    func.apply(this, args);
    // 设置定时器，延迟后允许再次触发
    timeoutId = setTimeout(() => {
      timeoutId = null;
    }, delay);
  };
}

// 绑定防抖后的函数
const favoriteBtn = document.getElementById('your-favorite-button-id');
favoriteBtn.addEventListener('click', debounce(addFavorites));

这种方案不仅能解决双击问题，还能处理用户快速连续点击的场景，灵活性更高。

解决方案3：区分单击与双击事件（兼容性拉满） #

如果担心某些浏览器对detail属性的支持有差异，还可以通过定时器来区分单击和双击：第一次点击后设置定时器，如果在延迟内触发第二次点击（双击），就只执行一次逻辑；如果超过延迟没触发第二次，就执行单击逻辑。

let clickTimeout;
const favoriteBtn = document.getElementById('your-favorite-button-id');

favoriteBtn.addEventListener('click', () => {
  // 如果已有定时器，说明是双击，清除定时器并执行一次逻辑
  if (clickTimeout) {
    clearTimeout(clickTimeout);
    clickTimeout = null;
    addFavorites();
    return;
  }
  // 单击情况，延迟执行逻辑
  clickTimeout = setTimeout(() => {
    addFavorites();
    clickTimeout = null;
  }, 200);
});

// 可选：阻止双击的默认行为，避免额外的浏览器默认动作
favoriteBtn.addEventListener('dblclick', (e) => {
  e.preventDefault();
});

这个方案兼容性最好，适合需要覆盖老旧浏览器的场景。

这些方案都不需要移除事件监听器，完全满足你“每次点击都能触发事件，但双击只触发一次”的需求～

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