我想添加一个自定义右键菜单到我的web应用程序。这可以在不使用任何预先构建的库的情况下完成吗?如果是这样，如何显示一个简单的自定义右键菜单，不使用第三方JavaScript库?
我的目标是像谷歌Docs做的东西。它允许用户右键单击并显示用户自己的菜单。
注意: 我想学习如何制作我自己的，而不是使用别人已经制作的东西，因为大多数时候，那些第三方库的功能都很臃肿，而我只想要我需要的功能，所以我希望它完全由我手工制作。
当前回答
试试这个
$(function() {
var doubleClicked = false;
$(document).on("contextmenu", function (e) {
if(doubleClicked == false) {
e.preventDefault(); // To prevent the default context menu.
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("bottom", "auto");
} else {
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("bottom", "auto");
}
$("#contextMenuContainer").fadeIn(500, FocusContextOut());
doubleClicked = true;
} else {
e.preventDefault();
doubleClicked = false;
$("#contextMenuContainer").fadeOut(500);
}
});
function FocusContextOut() {
$(document).on("click", function () {
doubleClicked = false;
$("#contextMenuContainer").fadeOut(500);
$(document).off("click");
});
}
});
http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/
其他回答
一些漂亮的CSS和一些没有外部库的非标准html标记的组合可以得到一个不错的结果(JSFiddle)
HTML
<menu id="ctxMenu">
<menu title="File">
<menu title="Save"></menu>
<menu title="Save As"></menu>
<menu title="Open"></menu>
</menu>
<menu title="Edit">
<menu title="Cut"></menu>
<menu title="Copy"></menu>
<menu title="Paste"></menu>
</menu>
</menu>
注意:菜单标签不存在，我是虚构的(你可以使用任何东西)
CSS
#ctxMenu{
display:none;
z-index:100;
}
menu {
position:absolute;
display:block;
left:0px;
top:0px;
height:20px;
width:20px;
padding:0;
margin:0;
border:1px solid;
background-color:white;
font-weight:normal;
white-space:nowrap;
}
menu:hover{
background-color:#eef;
font-weight:bold;
}
menu:hover > menu{
display:block;
}
menu > menu{
display:none;
position:relative;
top:-20px;
left:100%;
width:55px;
}
menu[title]:before{
content:attr(title);
}
menu:not([title]):before{
content:"\2630";
}
JavaScript只是为这个例子，我个人删除它在窗口上的持久菜单
var notepad = document.getElementById("notepad");
notepad.addEventListener("contextmenu",function(event){
event.preventDefault();
var ctxMenu = document.getElementById("ctxMenu");
ctxMenu.style.display = "block";
ctxMenu.style.left = (event.pageX - 10)+"px";
ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
var ctxMenu = document.getElementById("ctxMenu");
ctxMenu.style.display = "";
ctxMenu.style.left = "";
ctxMenu.style.top = "";
},false);
还要注意，对于从右向左展开的菜单，您可能会将菜单> menu{left:100%;}修改为菜单> menu{right:100%;}。你需要在某个地方加上一个边距之类的东西
我知道这个问题已经有了答案，但我花了一些时间来解决第二个答案，以使本机上下文菜单消失，并在用户单击的地方显示出来。 超文本标记语言
<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例子
最简单的跳跃开始函数，在光标位置创建一个上下文菜单，在鼠标离开时破坏自己。
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 }
已测试，可在Opera 12.17, firefox 30, Internet Explorer 9和chrome 26.0.1410.64中运行
document.oncontextmenu =function( evt ){
alert("OK?");
return false;
}
一个简单的方法是使用onContextMenu返回一个JavaScript函数:
<input type="button" value="Example" onContextMenu="return RightClickFunction();">
<script>
function RightClickFunction() {
// Enter your code here;
return false;
}
</script>
7:13进入的时候，回的是虚假。您将取消上下文菜单。
如果你仍然想显示上下文菜单，你可以删除返回false;线。
推荐文章
- 截断字符串直接JavaScript
- 我如何使用可选的链接与数组和函数?
- EINVRES请求https://bower.herokuapp.com/packages/失败，提示502
- 使用fetch进行基本身份验证?
- 如何从子组件内部更新React上下文?
- 如何将一个普通对象转换为ES6映射?
- scrollIntoView卷轴太远了
- Angular ng-repeat反过来
- 如何获得请求路径与表达请求对象
- 使用Handlebars 'each'循环访问父对象的属性
- 盎格鲁- ngcloak / ngg展示blink元素
- 禁用表单自动提交按钮单击
- 节点和错误:EMFILE，打开的文件太多
- JavaScript函数中的默认参数值
- 使用RegExp.exec从字符串中提取所有匹配项
