如何向网页添加自定义右键菜单？

WBOY 转载: 2023-09-15 23:29:02 386浏览

如何向网页添加自定义右键菜单？

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

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

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

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

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

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

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

步骤

第一步 − 在第一步中，我们将创建一个HTML文档并创建一个网页来测试我们的代码。
第二步 - 在这一步中，我们将在HTML文档中添加oncontextmenu事件，因为右键单击整个网页时菜单会弹出。
第三步 - 在最后一步中，我们将定义一个带有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 步 - 在第一步中，我们将创建一个必须在上下文菜单中显示的项目列表，并使其保持显示：无；默认情况下，只有右键单击页面才可见。
第 2 步 - 在下一步中，我们将使用
第 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 = "//m.sbmmt.com/m/faq/#"> Menu Item-1 </a></li>
   <li class = "items"><a href = "//m.sbmmt.com/m/faq/#"> Menu Item-2 </a></li>
   <li class = "items"><a href = "//m.sbmmt.com/m/faq/#"> Menu Item-3 </a></li>
   <li class = "items"><a href = "//m.sbmmt.com/m/faq/#"> Menu Item-4 </a></li>
   <li class = "items"><a href = "//m.sbmmt.com/m/faq/#"> Menu Item-5 </a></li>
   <li class = "items"><a href = "//m.sbmmt.com/m/faq/#"> 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>

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