数据结构
网络
关系型数据库管理系统
操作系统
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+ 阅读量
