如何给页面添加追加右键菜单（原右键菜单功能保持不变）

要给页面添加自定义的右键菜单，同时保留浏览器默认的右键菜单功能，你需要使用 JavaScript 监听 contextmenu 事件，并阻止其默认行为，然后显示你自定义的菜单。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
<title>Custom Context Menu</title>
<style>
  #custom-menu {
    position: absolute;
    display: none;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    padding: 5px;
  }

  #custom-menu li {
    list-style: none;
    padding: 5px 10px;
    cursor: pointer;
  }

  #custom-menu li:hover {
    background-color: #eee;
  }
</style>
</head>
<body>

<div id="custom-menu">
  <ul>
    <li id="option1">Option 1</li>
    <li id="option2">Option 2</li>
    <li id="option3">Option 3</li>
  </ul>
</div>

<script>
  const customMenu = document.getElementById('custom-menu');
  const option1 = document.getElementById('option1');
  const option2 = document.getElementById('option2');
  const option3 = document.getElementById('option3');

  document.addEventListener('contextmenu', (event) => {
    event.preventDefault(); // 阻止默认右键菜单

    customMenu.style.display = 'block';
    customMenu.style.left = event.pageX + 'px';
    customMenu.style.top = event.pageY + 'px';
  });

  // 点击页面其他地方隐藏自定义菜单
  document.addEventListener('click', (event) => {
    if (event.target !== customMenu && !customMenu.contains(event.target)) {
      customMenu.style.display = 'none';
    }
  });

  // 自定义菜单选项的点击事件
  option1.addEventListener('click', () => {
    alert('Option 1 clicked!');
    customMenu.style.display = 'none'; // 点击后隐藏菜单
  });

  option2.addEventListener('click', () => {
    alert('Option 2 clicked!');
    customMenu.style.display = 'none';
  });

  option3.addEventListener('click', () => {
    alert('Option 3 clicked!');
    customMenu.style.display = 'none';
  });
</script>

</body>
</html>

代码解释:

HTML 结构: 创建一个隐藏的 <div> 作为自定义菜单，包含 <ul> 和 <li> 元素表示菜单项。
CSS 样式: 设置自定义菜单的样式，包括定位、背景、边框等。
JavaScript 逻辑:
- contextmenu 事件监听: 监听整个文档的 contextmenu 事件 (右键点击)。
- event.preventDefault(): 阻止浏览器默认的右键菜单行为。
- 显示自定义菜单: 设置自定义菜单的 display 属性为 block，并根据鼠标点击位置设置其 left 和 top 属性，使其显示在正确的位置。
- 点击其他地方隐藏菜单: 监听 click 事件，如果点击的目标不是自定义菜单或其子元素，则隐藏自定义菜单。
- 菜单项点击事件: 为每个菜单项添加 click 事件监听，执行相应的操作，并在点击后隐藏菜单。