使用jQuery或选择器创建上下文菜单：点击隐藏功能遇阻求助

你的代码存在以下几个关键问题： #

• DOM选择器调用错误：queryselector 必须补全为 document.querySelector，方法名首字母需大写（querySelector）
• 事件监听方法大小写错误：addeventlistner/removeeventlistner 需修正为 addEventListener/removeEventListener
• 函数名不匹配：showmenu中绑定的onmousedown未定义，你实际写的是mousedown函数；且缺失menuhide函数实现
• 核心逻辑缺失：没有监听右键点击触发菜单显示的事件，也未处理「点击菜单内部不隐藏」的判断逻辑

修正后的完整实现代码： #

HTML

<div class="context">
  <ul>
    <li>add</li>
    <li>copy</li>
    <li>paste</li>
  </ul>
</div>

CSS（给菜单添加基础样式与隐藏逻辑）

.context {
  position: fixed;
  display: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.context ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 120px;
}
.context ul li {
  padding: 6px 16px;
  cursor: pointer;
}
.context ul li:hover {
  background: #f5f5f5;
}

JavaScript

const contextMenu = document.querySelector(".context");

// 显示菜单
function showMenu(e) {
  // 阻止浏览器默认右键菜单
  e.preventDefault();
  // 设置菜单位置为鼠标点击处
  contextMenu.style.left = `${e.pageX}px`;
  contextMenu.style.top = `${e.pageY}px`;
  contextMenu.style.display = "block";
  // 绑定全局点击事件用于隐藏菜单
  document.addEventListener("mousedown", onMouseDown);
}

// 隐藏菜单
function hideMenu() {
  contextMenu.style.display = "none";
  document.removeEventListener("mousedown", onMouseDown);
}

// 全局点击事件处理
function onMouseDown(e) {
  // 判断点击目标是否在菜单内部，是则不隐藏
  if (!contextMenu.contains(e.target)) {
    hideMenu();
  }
}

// 监听右键点击事件触发菜单显示
document.addEventListener("contextmenu", showMenu);

// 菜单选项点击逻辑（可选）
contextMenu.querySelectorAll("li").forEach(item => {
  item.addEventListener("click", function() {
    console.log(this.textContent + " 被点击");
    hideMenu(); // 点击选项后隐藏菜单
  });
});

关键逻辑说明： #

1. 右键点击时阻止浏览器默认菜单，通过pageX/pageY定位自定义菜单并显示
2. 全局mousedown事件中判断点击区域：若点击菜单外则隐藏菜单，点击菜单内则不执行隐藏
3. 菜单选项点击后自动隐藏菜单，同时可添加自定义业务逻辑
4. 每次显示菜单时绑定全局事件，隐藏时移除，避免重复绑定导致的多次触发

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