如何在页面中增加追加的右键菜单,同时保留原有的右键菜单功能?

24 min read

您可以使用JavaScript编写一个自定义的右键菜单,然后将其附加到页面的事件监听器上。以下是一个简单的示例,演示了如何在页面上添加一个自定义的右键菜单:

<!--html结构-->
<div id="context-menu" style="position: absolute; display: none; background-color: white; border: 1px solid black;">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

<!-- JS代码 -->
<script>
  //获取菜单元素
  var contextMenu = document.getElementById("context-menu");
  
  //为页面添加右键菜单事件监听器
  document.addEventListener("contextmenu", function(event) {
    event.preventDefault();
    var x = event.clientX;
    var y = event.clientY;
    contextMenu.style.display = "block";
    contextMenu.style.left = x + "px";
    contextMenu.style.top = y + "px";
  });

  //为页面增加一个事件监听器,隐藏自定义右键菜单
  document.addEventListener("click", function(event) {
    contextMenu.style.display = "none";
  });
</script>

上面的代码块会在页面上创建一个自定义的右键菜单,并在每次用户右击页面时显示出来,当用户单击页面的其他部分时,该菜单将会隐藏。

请注意,这个代码只是一个简单的示例,您可以根据自己的需求进行修改和扩展。例如,您可以为菜单项添加事件监听器,或者使用CSS样式来美化自定义右键菜单。