JavaScript中需监听哪些事件以隐藏自定义上下文菜单？

嘿，我来帮你搞定这个自定义上下文菜单的隐藏问题！要让它和原生右键菜单表现得一模一样，你需要监听这几个关键事件，我给你逐个拆解：

1. 页面任意位置的点击事件（click） #

这是最核心的逻辑：用户点击菜单以外的任何区域，都应该隐藏自定义菜单。要注意区分点击菜单内部的情况，避免误隐藏。

示例代码：

const customMenu = document.getElementById('my-custom-contextmenu');

document.addEventListener('click', (e) => {
  // 判断点击目标是否属于菜单本身或其子元素
  if (!customMenu.contains(e.target)) {
    customMenu.classList.remove('show');
  }
});

2. 新的右键菜单触发事件（contextmenu） #

当用户在页面其他位置再次右键时，原生菜单会直接替换掉之前的，所以我们需要先隐藏当前显示的自定义菜单，再处理新的右键请求。

示例代码：

document.addEventListener('contextmenu', (e) => {
  // 先隐藏已显示的菜单（如果点击的不是菜单本身）
  if (!customMenu.contains(e.target)) {
    customMenu.classList.remove('show');
  }
  // 这里保留你原本的菜单显示逻辑，比如阻止默认行为后设置菜单位置
  e.preventDefault();
  customMenu.style.left = `${e.pageX}px`;
  customMenu.style.top = `${e.pageY}px`;
  customMenu.classList.add('show');
});

3. ESC按键事件（keydown） #

原生菜单支持按ESC键快速关闭，这个体验必须复刻。监听键盘的ESC按键，只要菜单处于显示状态就隐藏它。

示例代码：

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && customMenu.classList.contains('show')) {
    customMenu.classList.remove('show');
  }
});

4. 页面滚动事件（scroll） #

当用户滚动页面时，原生右键菜单会自动消失，我们的自定义菜单也得跟上这个逻辑。

示例代码：

window.addEventListener('scroll', () => {
  if (customMenu.classList.contains('show')) {
    customMenu.classList.remove('show');
  }
});

5. 菜单焦点丢失事件（focusout） #

如果你的菜单里有可交互元素（比如按钮、链接），当用户用Tab键切换焦点到菜单外时，菜单应该关闭。这里要注意用延迟判断，避免点击菜单内部元素时误触发。

示例代码：

customMenu.addEventListener('focusout', (e) => {
  setTimeout(() => {
    // 检查当前焦点是否还在菜单范围内
    if (!customMenu.contains(document.activeElement)) {
      customMenu.classList.remove('show');
    }
  }, 0);
});
// 记得给菜单内的可交互元素添加tabindex属性，让它们能获取焦点

把这些事件监听组合起来，你的自定义上下文菜单就能完全模拟原生菜单的隐藏行为啦！

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