JavaScript 上下文菜单 MouseEvent

在 web 应用程序中，上下文菜单（右键菜单）是常见的用户界面元素之一。用户可以通过右键单击页面元素打开上下文菜单，然后在其中选择操作，例如复制、粘贴、删除等。在 JavaScript 中，我们可以使用 MouseEvent 对象来监听和响应上下文菜单事件。

监听上下文菜单事件

要监听上下文菜单事件，我们需要在需要添加上下文菜单的元素上添加 mouseup 事件监听器，并在 mouseup 事件处理程序中测试事件对象的 which 属性是否为3（表示右键单击）。

let element = document.getElementById("myElement");

element.addEventListener("mouseup", function(event) {
  if (event.which === 3) {
    // 上下文菜单事件处理代码
  }
});

添加上下文菜单

要添加上下文菜单，我们可以使用 contextmenu 事件来阻止默认上下文菜单，并使用 DOM 操作创建自定义上下文菜单。

let element = document.getElementById("myElement");

element.addEventListener("contextmenu", function(event) {
  event.preventDefault();

  // 创建上下文菜单
  let menu = document.createElement("div");
  menu.style.position = "absolute";
  menu.style.top = event.clientY + "px";
  menu.style.left = event.clientX + "px";
  menu.style.backgroundColor = "#fff";
  menu.style.border = "1px solid #ccc";
  menu.style.boxShadow = "2px 2px 4px rgba(0, 0, 0, 0.3)";
  menu.innerHTML = `
    <ul>
      <li><a href="#">复制</a></li>
      <li><a href="#">粘贴</a></li>
      <li><a href="#">删除</a></li>
    </ul>
  `;

  // 添加上下文菜单到页面
  document.body.appendChild(menu);
});

注意，上面的代码是使用简单的 HTML 和 CSS 代码创建的自定义上下文菜单。您可以根据自己的需求调整 CSS 样式和菜单内容。

隐藏上下文菜单

在执行选择操作后，我们需要隐藏自定义上下文菜单。我们可以在单击任何地方时使用 click 事件监听器来隐藏自定义菜单。

let element = document.getElementById("myElement");
let menu = null;

element.addEventListener("contextmenu", function(event) {
  event.preventDefault();

  // 创建上下文菜单
  menu = document.createElement("div");
  menu.style.position = "absolute";
  menu.style.top = event.clientY + "px";
  menu.style.left = event.clientX + "px";
  menu.style.backgroundColor = "#fff";
  menu.style.border = "1px solid #ccc";
  menu.style.boxShadow = "2px 2px 4px rgba(0, 0, 0, 0.3)";
  menu.innerHTML = `
    <ul>
      <li><a href="#">复制</a></li>
      <li><a href="#">粘贴</a></li>
      <li><a href="#">删除</a></li>
    </ul>
  `;

  // 添加上下文菜单到页面
  document.body.appendChild(menu);

  // 隐藏上下文菜单
  document.addEventListener("click", hideMenu);
});

function hideMenu() {
  if (menu !== null) {
    menu.remove();
    menu = null;
    document.removeEventListener("click", hideMenu);
  }
}

结论

上下文菜单是 web 应用程序的常见用户界面元素之一。在 JavaScript 中，我们可以使用 MouseEvent 对象来监听和响应上下文菜单事件，然后使用 DOM 操作创建自定义上下文菜单，并在单击任何地方时隐藏它。