在當(dāng)今時(shí)代，當(dāng)您在任何網(wǎng)頁(yè)上右鍵單擊時(shí)，會(huì)彈出一個(gè)帶有一些選項(xiàng)和功能的列表。這個(gè)彈出菜單也被稱為上下文菜單，它是瀏覽器提供的默認(rèn)彈出菜單。此菜單列表中的項(xiàng)目在不同的瀏覽器中會(huì)有所不同。有些瀏覽器提供更多的功能，而有些瀏覽器提供的功能有限。
但是這里有一種方法可以在您的網(wǎng)頁(yè)上添加自定義上下文菜單或右鍵菜單，您可以根據(jù)需要添加盡可能多的選項(xiàng)。但是在添加自定義上下文菜單之前，您需要更改網(wǎng)頁(yè)上默認(rèn)右鍵點(diǎn)擊的行為，該行為會(huì)打開(kāi)默認(rèn)的上下文菜單。自定義上下文菜單的添加包括以下兩個(gè)步驟：
更改顯示默認(rèn)右鍵菜單的默認(rèn)行為。
添加我們自己的自定義上下文菜單，并通過(guò)單擊鼠標(biāo)右鍵將其顯示在網(wǎng)頁(yè)上。
讓我們現(xiàn)在通過(guò)實(shí)際的代碼示例，逐步詳細(xì)理解上述的兩個(gè)步驟。
刪除或隱藏默認(rèn)上下文菜單
為了在網(wǎng)頁(yè)上右鍵單擊時(shí)顯示我們的自定義上下文菜單，首先我們需要移除或隱藏默認(rèn)的上下文菜單，并通過(guò)將包含preventDefault()方法的函數(shù)分配給document.oncontextmenu事件來(lái)更改右鍵單擊的默認(rèn)行為，該事件在用戶右鍵單擊網(wǎng)頁(yè)時(shí)調(diào)用該函數(shù)。
讓我們討論一下防止隱藏默認(rèn)上下文菜單的默認(rèn)行為的實(shí)際實(shí)現(xiàn)。
步驟
第一步 ? 在第一步中，我們將創(chuàng)建一個(gè)HTML文檔并創(chuàng)建一個(gè)網(wǎng)頁(yè)來(lái)測(cè)試我們的代碼。
第二步 – 在這一步中，我們將在HTML文檔中添加oncontextmenu事件，因?yàn)橛益I單擊整個(gè)網(wǎng)頁(yè)時(shí)菜單會(huì)彈出。
第三步 – 在最后一步中，我們將定義一個(gè)帶有preventDefault()方法或return false;語(yǔ)句的JavaScript函數(shù)，以防止默認(rèn)的上下文菜單彈出。
示例
下面的示例將說(shuō)明如何更改默認(rèn)上下文菜單的默認(rèn)行為并隱藏它?
<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>
登錄后復(fù)制
在上面的示例中，我們了解了如何通過(guò)使用 preventDefault() 方法分配函數(shù)來(lái)刪除或隱藏右鍵單擊頁(yè)面時(shí)的默認(rèn)上下文菜單功能。
讓我們現(xiàn)在了解如何添加自定義上下文菜單，并在右鍵單擊頁(yè)面時(shí)使其可見(jiàn)。
步驟
第 1 步 – 在第一步中，我們將創(chuàng)建一個(gè)必須在上下文菜單中顯示的項(xiàng)目列表，并使其保持顯示：無(wú)；默認(rèn)情況下，只有右鍵單擊頁(yè)面才可見(jiàn)。
第 2 步 – 在下一步中，我們將使用 元素根據(jù)內(nèi)部 CSS 的要求設(shè)置列表的樣式。
第 3 步 – 在最后一步中，我們將向自定義菜單添加 JavaScript 功能，以便在用戶右鍵單擊頁(yè)面后將其顯示在網(wǎng)頁(yè)上。
示例
以下示例將說(shuō)明如何防止默認(rèn)上下文菜單顯示，以及如何添加和顯示自定義上下文菜單 ?
<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>
登錄后復(fù)制
在這個(gè)例子中，我們隱藏了默認(rèn)的上下文菜單，并在右鍵單擊頁(yè)面時(shí)顯示我們自己創(chuàng)建的上下文菜單，位置在點(diǎn)擊時(shí)光標(biāo)所在的位置。
結(jié)論
在本文中，我們了解了如何在右鍵單擊網(wǎng)頁(yè)時(shí)刪除或隱藏默認(rèn)上下文值，并在同一操作中顯示我們自己的自定義上下文菜單。通過(guò)這種方式，我們可以添加自定義上下文菜單，其中包含我們想要在其中顯示的選項(xiàng)。
以上就是如何向網(wǎng)頁(yè)添加自定義右鍵菜單？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
