JavaScript DOM点击事件绑定过快：无需超时的解决方案

下面是几种不用短超时的可行方案：

方案一：临时忽略首次点击事件 #

在打开菜单时设置标记，让外部点击监听器忽略触发菜单打开的那次冒泡点击，之后重置标记恢复正常逻辑。

class Menu {
  constructor() {
    this.ignoreNextClick = false;
    // 初始化菜单元素，比如 this.menu = document.querySelector('.menu');
  }

  clickOutsideHandler = e => {
    // 忽略触发菜单打开的那次点击
    if (this.ignoreNextClick) {
      this.ignoreNextClick = false;
      return;
    }
    if (!this.menu.contains(e.target)) {
      this.close();
    }
  };

  open() {
    // 应用样式变更，比如显示菜单
    this.ignoreNextClick = true;
    document.addEventListener('click', this.clickOutsideHandler);
  }

  close() {
    // 还原样式变更，比如隐藏菜单
    document.removeEventListener('click', this.clickOutsideHandler);
  }
}

方案二：排除触发元素的点击 #

在外部点击监听器中，判断事件目标是否是菜单触发元素（或其后代），如果是则直接返回，不执行关闭逻辑。

class Menu {
  clickOutsideHandler = e => {
    // 检查点击目标是否是触发按钮或其内部元素
    if (e.target.closest('[data-menu-trigger]')) {
      return;
    }
    if (!this.menu.contains(e.target)) {
      this.close();
    }
  };

  open() {
    // 应用样式变更
    document.addEventListener('click', this.clickOutsideHandler);
  }

  close() {
    // 还原样式变更...
    document.removeEventListener('click', this.clickOutsideHandler);
  }
}

方案三：阻止触发事件的冒泡 #

在菜单触发按钮的点击事件中，阻止事件向上冒泡到document，这样刚绑定的外部点击监听器就不会接收到这次点击。

document.querySelectorAll('[data-menu-trigger]').forEach(trigger => {
  trigger.addEventListener('click', e => {
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡到document
    menu.open();
  });
});

注意：这个方案会阻止触发按钮的点击事件向父元素传播，如果页面中有依赖该事件冒泡的其他逻辑，需要谨慎使用。

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