我想添加一个自定义右键菜单到我的web应用程序。这可以在不使用任何预先构建的库的情况下完成吗?如果是这样，如何显示一个简单的自定义右键菜单，不使用第三方JavaScript库?
我的目标是像谷歌Docs做的东西。它允许用户右键单击并显示用户自己的菜单。
注意: 我想学习如何制作我自己的，而不是使用别人已经制作的东西，因为大多数时候，那些第三方库的功能都很臃肿，而我只想要我需要的功能，所以我希望它完全由我手工制作。
当前回答
<html>
<head>
<style>
.rightclick {
/* YOUR CONTEXTMENU'S CSS */
visibility: hidden;
background-color: white;
border: 1px solid grey;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div class="rightclick" id="ya">
<p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
</div>
<p>Right click to get sweet results!</p>
</body>
<script>
document.onclick = noClick;
document.oncontextmenu = rightClick;
function rightClick(e) {
e = e || window.event;
e.preventDefault();
document.getElementById("ya").style.visibility = "visible";
console.log("Context Menu v1.3.0 by IamGuest opened.");
}
function noClick() {
document.getElementById("ya").style.visibility = "hidden";
console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>
您可以调整和修改这段代码，使上下文菜单看起来更美观、更高效。至于修改一个现有的上下文菜单，我不知道如何做到这一点…看看这把小提琴，有组织的观点。另外，试着点击我的上下文菜单中的项目。他们应该提醒你一些很棒的信息。如果它们不起作用，那就试试别的……复杂。
其他回答
这是一个很好的教程，教你如何用一个完整的工作代码示例(不含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上找到。
回答你的问题-使用上下文菜单事件，如下所示:
if (document.addEventListener) { 文档。addEventListener('contextmenu'，函数(e) { alert(“您已尝试打开上下文菜单”);//在这里您可以绘制自己的菜单 e.preventDefault (); },假); }其他{ 文档。attachEvent('oncontextmenu'， function() { alert(“您已尝试打开上下文菜单”); window.event.returnValue = false; })； ｝ <身体> Lorem ipsum…… < /身体>
但是你应该问问自己，你真的想要覆盖默认的右击行为吗?这取决于你正在开发的应用程序。
吉斯菲德尔
你可以用这段代码来做。 访问这里获得完整的自动边缘检测教程http://www.voidtricks.com/custom-right-click-context-menu/
$(document).ready(function () {
$("html").on("contextmenu",function(e){
//prevent default context menu for right click
e.preventDefault();
var menu = $(".menu");
//hide menu if already shown
menu.hide();
//get x and y values of the click event
var pageX = e.pageX;
var pageY = e.pageY;
//position menu div near mouse cliked area
menu.css({top: pageY , left: pageX});
var mwidth = menu.width();
var mheight = menu.height();
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//if window is scrolled
var scrTop = $(window).scrollTop();
//if the menu is close to right edge of the window
if(pageX+mwidth > screenWidth){
menu.css({left:pageX-mwidth});
}
//if the menu is close to bottom edge of the window
if(pageY+mheight > screenHeight+scrTop){
menu.css({top:pageY-mheight});
}
//finally show the menu
menu.show();
});
$("html").on("click", function(){
$(".menu").hide();
});
});
`
我知道这个问题已经有了答案，但我花了一些时间来解决第二个答案，以使本机上下文菜单消失，并在用户单击的地方显示出来。 超文本标记语言
<body>
<div id="test1">
<a href="www.google.com" class="test">Google</a>
<a href="www.google.com" class="test">Link 2</a>
<a href="www.google.com" class="test">Link 3</a>
<a href="www.google.com" class="test">Link 4</a>
</div>
<!-- initially hidden right-click menu -->
<div class="hide" id="rmenu">
<ul>
<li class="White">White</li>
<li>Green</li>
<li>Yellow</li>
<li>Orange</li>
<li>Red</li>
<li>Blue</li>
</ul>
</div>
</body>
CSS
.hide {
display: none;
}
#rmenu {
border: 1px solid black;
background-color: white;
}
#rmenu ul {
padding: 0;
list-style: none;
}
#rmenu li
{
list-style: none;
padding-left: 5px;
padding-right: 5px;
}
JavaScript
if (document.getElementById('test1').addEventListener) {
document.getElementById('test1').addEventListener('contextmenu', function(e) {
$("#rmenu").toggleClass("hide");
$("#rmenu").css(
{
position: "absolute",
top: e.pageY,
left: e.pageX
}
);
e.preventDefault();
}, false);
}
// this is from another SO post...
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
CodePen例子
你可以试着通过在body标签中添加以下内容来阻止上下文菜单:
<body oncontextmenu="return false;">
这将阻止对上下文菜单的所有访问(不仅从鼠标右键，而且从键盘)。
附注:你可以把它添加到任何你想禁用上下文菜单的标签上
例如:
<div class="mydiv" oncontextmenu="return false;">
将禁用上下文菜单在特定的div只
