如何在网页上添加自定义右键菜单?

cssweb developmentfront end technology更新于 2024/6/2 22:04:17

如今，当您右键单击任何网页时，都会弹出一个包含一些选项和功能的列表。此弹出菜单也称为上下文菜单，是浏览器提供的默认弹出菜单。此菜单列表中的项目因浏览器而异。有些浏览器提供更多功能，而有些则提供有限的功能。

但这里有一种方法可以在您的网页上添加您自己的自定义上下文菜单或右键菜单，并根据需要添加任意数量的选项。但在添加自定义上下文菜单之前，您需要更改网页上默认右键单击的行为，从而打开默认上下文菜单。自定义上下文菜单的添加包含以下两个步骤:

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

现在，让我们通过代码示例的实际操作，逐一详细地了解上述两个步骤。

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

为了在网页上显示自定义的右键菜单，首先我们需要移除或隐藏默认上下文菜单，并通过将包含 preventDefault() 方法的函数分配给 document.oncontextmenu 事件来更改右键的默认行为，以防止右键的默认行为，该事件在用户右键单击网页时调用该函数。

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

步骤

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

示例

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

<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 − 在下一步中，我们将根据内部 CSS 的要求，使用 <style> 样式表对列表进行样式设置。元素。
步骤 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>
      // 点击文档时隐藏菜单
      function hideCustomContextMenu() {
         document.getElementById('customContextMenu').style.display = "none";
      }
      
      // 右键单击页面即可切换菜单
      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>

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