在當今時代，當您在任何網頁上右鍵單擊時，會彈出一個帶有一些選項和功能的列表。這個彈出菜單也被稱為上下文菜單，它是瀏覽器提供的默認彈出菜單。此菜單列表中的項目在不同的瀏覽器中會有所不同。有些瀏覽器提供更多的功能，而有些瀏覽器提供的功能有限。
但是這里有一種方法可以在您的網頁上添加自定義上下文菜單或右鍵菜單，您可以根據需要添加盡可能多的選項。但是在添加自定義上下文菜單之前，您需要更改網頁上默認右鍵點擊的行為，該行為會打開默認的上下文菜單。自定義上下文菜單的添加包括以下兩個步驟：
更改顯示默認右鍵菜單的默認行為。
添加我們自己的自定義上下文菜單，并通過單擊鼠標右鍵將其顯示在網頁上。
讓我們現在通過實際的代碼示例，逐步詳細理解上述的兩個步驟。
刪除或隱藏默認上下文菜單
為了在網頁上右鍵單擊時顯示我們的自定義上下文菜單，首先我們需要移除或隱藏默認的上下文菜單，并通過將包含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 步 – 在下一步中，我們將使用 元素根據內部 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>
登錄后復制
在這個例子中，我們隱藏了默認的上下文菜單，并在右鍵單擊頁面時顯示我們自己創建的上下文菜單，位置在點擊時光標所在的位置。
結論
在本文中，我們了解了如何在右鍵單擊網頁時刪除或隱藏默認上下文值，并在同一操作中顯示我們自己的自定義上下文菜單。通過這種方式，我們可以添加自定義上下文菜單，其中包含我們想要在其中顯示的選項。
以上就是如何向網頁添加自定義右鍵菜單？的詳細內容，更多請關注www.92cms.cn其它相關文章！
