我想添加一个自定义右键菜单到我的web应用程序。这可以在不使用任何预先构建的库的情况下完成吗?如果是这样，如何显示一个简单的自定义右键菜单，不使用第三方JavaScript库?
我的目标是像谷歌Docs做的东西。它允许用户右键单击并显示用户自己的菜单。
注意: 我想学习如何制作我自己的，而不是使用别人已经制作的东西，因为大多数时候，那些第三方库的功能都很臃肿，而我只想要我需要的功能，所以我希望它完全由我手工制作。
当前回答
最简单的跳跃开始函数，在光标位置创建一个上下文菜单，在鼠标离开时破坏自己。
oncontextmenu = (e) => { e.preventDefault() let menu = document.createElement("div") menu.id = "ctxmenu" menu.style = `top:${e.pageY-10}px;left:${e.pageX-40}px` menu.onmouseleave = () => ctxmenu.outerHTML = '' menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p><p onclick='alert(`Thank you!`)'>Upvote</p>" document.body.appendChild(menu) } #ctxmenu { position: fixed; background: ghostwhite; color: black; cursor: pointer; border: 1px black solid } #ctxmenu > p { padding: 0 1rem; margin: 0 } #ctxmenu > p:hover { background: black; color: ghostwhite }
其他回答
<script>
function fun(){
document.getElementById('menu').style.display="block";
}
</script>
<div id="menu" style="display: none"> menu items</div>
<body oncontextmenu="fun();return false;">
我在这里做什么
创建自己的自定义div菜单，并设置位置:绝对和显示:none以防万一。 将oncontextmenu事件添加到要单击的页面或元素中。 使用返回false取消默认的浏览器操作。 使用js调用自己的操作。
一个简单的方法是使用onContextMenu返回一个JavaScript函数:
<input type="button" value="Example" onContextMenu="return RightClickFunction();">
<script>
function RightClickFunction() {
// Enter your code here;
return false;
}
</script>
7:13进入的时候，回的是虚假。您将取消上下文菜单。
如果你仍然想显示上下文菜单，你可以删除返回false;线。
你应该记住，如果你想使用Firefox唯一的解决方案，如果你想把它添加到整个文档，你应该把contextmenu="mymenu"添加到<html>标签，而不是body标签。 你应该注意这一点。
回答你的问题-使用上下文菜单事件，如下所示:
if (document.addEventListener) { 文档。addEventListener('contextmenu'，函数(e) { alert(“您已尝试打开上下文菜单”);//在这里您可以绘制自己的菜单 e.preventDefault (); },假); }其他{ 文档。attachEvent('oncontextmenu'， function() { alert(“您已尝试打开上下文菜单”); window.event.returnValue = false; })； ｝ <身体> Lorem ipsum…… < /身体>
但是你应该问问自己，你真的想要覆盖默认的右击行为吗?这取决于你正在开发的应用程序。
吉斯菲德尔
这是一个很好的教程，教你如何用一个完整的工作代码示例(不含JQuery和其他库)构建一个自定义上下文菜单。
你也可以在GitHub上找到他们的演示代码。
他们给出了详细的一步一步的解释，你可以跟着来构建你自己的右键上下文菜单(包括html, css和javascript代码)，并在最后通过给出完整的示例代码来总结它。
您可以轻松地遵循并根据自己的需要进行调整。而且不需要JQuery或其他库。
这是他们的菜单代码示例:
<nav id="context-menu" class="context-menu">
<ul class="context-menu__items">
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="View"><i class="fa fa-eye"></i> View Task</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Edit"><i class="fa fa-edit"></i> Edit Task</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="Delete"><i class="fa fa-times"></i> Delete Task</a>
</li>
</ul>
</nav>
一个工作示例(任务列表)可以在codepend上找到。
