在當今時代，當您在任何網頁上右鍵單擊時，會彈出一個帶有一些選項和功能的清單。這個彈出式選單也被稱為上下文選單，它是瀏覽器提供的預設彈出式選單。此選單清單中的項目在不同的瀏覽器中會有所不同。有些瀏覽器提供更多的功能，有些瀏覽器提供的功能有限。
但是這裡有一種方法可以在您的網頁上添加自訂上下文選單或右鍵選單，您可以根據需要添加盡可能多的選項。但是在新增自訂上下文功能表之前，您需要更改網頁上預設右鍵點擊的行為，該行為會開啟預設的上下文功能表。自訂上下文選單的新增包括以下兩個步驟：
更改顯示預設右鍵選單的預設行為。
新增我們自己的自訂上下文選單，並透過點擊滑鼠右鍵將其顯示在網頁上。
讓我們現在透過實際的程式碼範例，逐步詳細理解上述的兩個步驟。
為了在網頁上右鍵單擊時顯示我們的自訂上下文選單，首先我們需要移除或隱藏預設的上下文選單，並透過將包含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 步 - 在下一個步驟中，我們將使用