首頁 > 文章 > web前端 > 如何為網頁新增自訂右鍵選單？

如何為網頁新增自訂右鍵選單？

WBOY轉載: 2023-09-15 23:29:02938瀏覽

如何為網頁新增自訂右鍵選單？

在當今時代，當您在任何網頁上右鍵單擊時，會彈出一個帶有一些選項和功能的清單。這個彈出式選單也被稱為上下文選單，它是瀏覽器提供的預設彈出式選單。此選單清單中的項目在不同的瀏覽器中會有所不同。有些瀏覽器提供更多的功能，有些瀏覽器提供的功能有限。

但是這裡有一種方法可以在您的網頁上添加自訂上下文選單或右鍵選單，您可以根據需要添加盡可能多的選項。但是在新增自訂上下文功能表之前，您需要更改網頁上預設右鍵點擊的行為，該行為會開啟預設的上下文功能表。自訂上下文選單的新增包括以下兩個步驟：

更改顯示預設右鍵選單的預設行為。
新增我們自己的自訂上下文選單，並透過點擊滑鼠右鍵將其顯示在網頁上。

讓我們現在透過實際的程式碼範例，逐步詳細理解上述的兩個步驟。

刪除或隱藏預設上下文選單

為了在網頁上右鍵單擊時顯示我們的自訂上下文選單，首先我們需要移除或隱藏預設的上下文選單，並透過將包含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 = "#"> 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>

在這個例子中，我們隱藏了預設的上下文選單，並在右鍵單擊頁面時顯示我們自己創建的上下文選單，位置在點擊時間標記所在的位置。

結論

在本文中，我們了解如何在右鍵單擊網頁時刪除或隱藏預設上下文值，並在同一操作中顯示我們自己的自訂上下文功能表。透過這種方式，我們可以新增自訂上下文選單，其中包含我們想要在其中顯示的選項。

以上是如何為網頁新增自訂右鍵選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html 事件

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：動畫 CSS 高度屬性下一篇：動畫 CSS 高度屬性

看更多