在当今时代，当您在任何网页上右键单击时，会弹出一个带有一些选项和功能的列表。这个弹出菜单也被称为上下文菜单，它是浏览器提供的默认弹出菜单。此菜单列表中的项目在不同的浏览器中会有所不同。有些浏览器提供更多的功能，而有些浏览器提供的功能有限。
但是这里有一种方法可以在您的网页上添加自定义上下文菜单或右键菜单，您可以根据需要添加尽可能多的选项。但是在添加自定义上下文菜单之前，您需要更改网页上默认右键点击的行为，该行为会打开默认的上下文菜单。自定义上下文菜单的添加包括以下两个步骤：
更改显示默认右键菜单的默认行为。
添加我们自己的自定义上下文菜单，并通过单击鼠标右键将其显示在网页上。
让我们现在通过实际的代码示例，逐步详细理解上述的两个步骤。
删除或隐藏默认上下文菜单
为了在网页上右键单击时显示我们的自定义上下文菜单，首先我们需要移除或隐藏默认的上下文菜单，并通过将包含preventDefault()方法的函数分配给document.oncontextmenu事件来更改右键单击的默认行为，该事件在用户右键单击网页时调用该函数。
让我们讨论一下防止隐藏默认上下文菜单的默认行为的实际实现。
步骤
第一步 − 在第一步中，我们将创建一个HTML文档并创建一个网页来测试我们的代码。
第二步 – 在这一步中，我们将在HTML文档中添加oncontextmenu事件，因为右键单击整个网页时菜单会弹出。
第三步 – 在最后一步中，我们将定义一个带有preventDefault()方法或return false;语句的JavaScript函数，以防止默认的上下文菜单弹出。
示例
下面的示例将说明如何更改默认上下文菜单的默认行为并隐藏它−
document.oncontextmenu = hideRightClickMenu; function hideRightClickMenu(event) { event.preventDefault() // OR // return false; }It is the Demo web page for testing.
在上面的示例中，我们了解了如何通过使用 preventDefault() 方法分配函数来删除或隐藏右键单击页面时的默认上下文菜单功能。
让我们现在了解如何添加自定义上下文菜单，并在右键单击页面时使其可见。
步骤
第 1 步 – 在第一步中，我们将创建一个必须在上下文菜单中显示的项目列表，并使其保持显示：无；默认情况下，只有右键单击页面才可见。
第 2 步 – 在下一步中，我们将使用 元素根据内部 CSS 的要求设置列表的样式。
第 3 步 – 在最后一步中，我们将向自定义菜单添加 JavaScript 功能，以便在用户右键单击页面后将其显示在网页上。
示例
以下示例将说明如何防止默认上下文菜单显示，以及如何添加和显示自定义上下文菜单 −
#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;} Add a custom right-click menu to a webpage
Please right click to to see the menu
// 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;
在这个例子中，我们隐藏了默认的上下文菜单，并在右键单击页面时显示我们自己创建的上下文菜单，位置在点击时光标所在的位置。
结论
在本文中，我们了解了如何在右键单击网页时删除或隐藏默认上下文值，并在同一操作中显示我们自己的自定义上下文菜单。通过这种方式，我们可以添加自定义上下文菜单，其中包含我们想要在其中显示的选项。
以上就是如何向网页添加自定义右键菜单？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626160.html
微信扫一扫 
支付宝扫一扫 
