資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在網頁中新增自定義右鍵選單？
如今，當您在任何網頁上單擊右鍵時，都會彈出一個包含一些選項和功能的列表。此彈出選單也稱為上下文選單，它是瀏覽器提供的預設彈出選單。此選單列表中的專案在不同的瀏覽器中有所不同。一些瀏覽器提供更多功能，而一些瀏覽器提供有限的功能。
但是，這裡有一種方法可以在您的網頁上新增您自己的自定義上下文選單或右鍵選單，並根據需要新增儘可能多的選項。但在新增自定義上下文選單之前，您需要更改網頁上預設右鍵單擊開啟預設上下文選單的行為。自定義上下文選單的新增包括以下兩個步驟：
更改顯示預設右鍵選單的預設行為。
新增我們自己的自定義上下文選單，並在使用者單擊滑鼠右鍵時將其顯示在網頁上。
現在讓我們詳細瞭解以上兩個步驟，並透過程式碼示例的幫助來實際實現它們。
刪除或隱藏預設上下文選單
要在網頁上右鍵單擊時顯示我們的自定義上下文選單，首先我們需要刪除或隱藏預設上下文選單，並透過將包含preventDefault()方法的功能分配給document.oncontextmenu事件來更改右鍵單擊的預設行為，該功能在使用者右鍵單擊網頁時呼叫該函式。
讓我們討論一下阻止隱藏預設上下文選單的預設行為的實際實現。
步驟
步驟 1 - 在第一步中，我們將建立一個 HTML 文件並建立一個網頁來測試我們的程式碼。
步驟 2 - 在此步驟中，我們將oncontextmenu事件新增到 HTML 文件中，因為選單在整個網頁上右鍵單擊時會彈出。
步驟 3 - 在最後一步中，我們將定義一個帶有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 - 在第一步中，我們將建立一個要在上下文選單中顯示的專案列表，並預設將其設定為display: none;，以便它僅在網頁上右鍵單擊時可見。
步驟 2 - 在下一步中，我們將使用<style>元素透過內部 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>
在此示例中，我們隱藏了預設上下文選單，並在使用者在單擊時在游標位置右鍵單擊頁面時顯示我們建立的自定義上下文選單。
結論
在本文中，我們已經瞭解瞭如何在網頁上右鍵單擊時刪除或隱藏預設上下文值，並在相同的操作上顯示我們自己的自定義上下文選單。這樣，我們可以新增我們自己的自定義上下文選單，並根據需要顯示其中的選項。
3K+ 閱讀量
