CSS 如何在网页中添加自定义右键菜单

在今天，当你右键单击任何网页时，会弹出一组选项和功能的列表。这个弹出菜单也被称为上下文菜单，它是浏览器提供的默认弹出菜单。此菜单列表中的项目在不同浏览器中有所不同。一些浏览器提供更多功能，而一些则提供有限功能。

但是下面是一种方法，可以在网页上添加您自己的自定义上下文菜单或右键菜单，具有您希望添加的尽可能多的选项。但在添加自定义上下文菜单之前，您需要更改网页上默认右键单击的行为，该行为会打开默认上下文菜单。自定义上下文菜单的添加包括以下两个步骤：

更改显示默认右键单击菜单的默认行为。
添加自己的自定义上下文菜单，并在单击鼠标右键时在网页上显示它。

接下来，我们将通过实际的代码示例逐步详细讲解以上两个步骤。

移除或隐藏默认的上下文菜单

要在网页的右键单击上显示自定义上下文菜单，首先我们需要移除或隐藏默认的上下文菜单，并通过为 preventDefault() 方法的函数分配一个侦听器来更改右键单击的默认行为，该侦听器在用户右键单击网页时调用该函数。

让我们讨论阻止隐藏默认上下文菜单的默认行为的实际实现。

步骤

步骤1 - 在第一步中，我们将创建一个HTML文档并创建一个用于测试我们代码的网页。
步骤2 - 在此步骤中，我们将将oncontextmenu事件添加到HTML文档中，因为菜单在右键单击整个网页时打开。
步骤3 - 在最后一步中，我们将定义一个具有preventDefault()方法或return false;语句的JavaScript函数，以阻止默认上下文菜单的弹出。

示例

以下示例将说明如何更改默认上下文菜单的默认行为并隐藏它 –

<html>
<body>
      <div style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
      <h2>It is the Demo web page for testing. </h2>
   </div>
   <script>
      document.oncontextmenu = hideRightClickMenu;
      function hideRightClickMenu(event) {
         event.preventDefault()
         // OR
         // return false;
      }
   </script>
</body>
</html>

在上面的示例中，我们看到了如何通过赋予一个包含preventDefault()方法的函数来删除或隐藏页面右键点击时的默认上下文菜单功能。

现在让我们来了解如何添加自定义上下文菜单，并使其在右键点击页面时可见。

步骤

步骤1 - 在第一步中，我们将创建一个要在上下文菜单中显示的项目列表，并默认设置display: none;，这样只有右键点击页面时才能看到它。
步骤2 - 在下一步中，我们将使用<style>元素使用内部CSS对列表进行样式设置。
步骤3 - 在最后一步中，我们将为自定义菜单添加JavaScript功能，使其在用户右键点击页面时显示在网页上。

示例

下面的示例将说明如何阻止默认上下文菜单的显示，以及如何添加和显示自定义上下文菜单。

<html>
<head>
   <style>
      #customContextMenu {
         position: absolute;
         background-color: #84abb5;
         color: white;
         height: 150px;
         width: 100px;
         text-align: center;
      }
      .menuItems {
         list-style: none;
         font-size: 12px;
         padding: 0;
         margin: 0;
      }
      .menuItems .items { padding: 5px; border-bottom: 1px solid #e6d4b6;}
      .menuItems .items:last-child { border: none;}
      .menuItems .items a {text-decoration: none; color: white;}
   </style>
</head>
<body>
   <div style = "background-color: green; color: white; height: 150px; text-align: center;">
   <h2> Add a custom right-click menu to a webpage </h2>
   <p> Please right click to to see the menu </p>
   </div>
   <div id = "customContextMenu" style = "display: none;">
   <ul class = "menuItems">
   <li class = "items"><a href = "#"> Menu Item-1 </a></li>
   <li class = "items"><a href = "#"> Menu Item-2 </a></li>
   <li class = "items"><a href = "#"> Menu Item-3 </a></li>
   <li class = "items"><a href = "#"> Menu Item-4 </a></li>
   <li class = "items"><a href = "#"> Menu Item-5 </a></li>
   <li class = "items"><a href = "#"> Menu Item-6</a></li>
   </ul>
   </div>
   <script>
      // hiding the menu on click to the document
      function hideCustomContextMenu() {
         document.getElementById('customContextMenu').style.display = "none";
      }

      // toggling the menu on right click to the page
      function showCustomContextMenu(event) {
         event.preventDefault();
         var myContextMenu = document.getElementById('customContextMenu');
         if (myContextMenu.style.display == "block") {
            myContextMenu.style.display = "none";
         }
         else {
            myContextMenu.style.display = "block";
            myContextMenu.style.left = event.pageX + "px";
            myContextMenu.style.top = event.pageY + "px";
         }
      }
      document.onclick = hideCustomContextMenu;
      document.oncontextmenu = showCustomContextMenu;
   </script>
</body>
</html>

在这个示例中，我们隐藏了默认的上下文菜单，并在右键单击页面时显示我们创建的自定义上下文菜单，在点击时显示在光标所在的位置。