鼠标右键弹出菜单
鼠标右键弹出菜单
开发工具与关键技术：MVC
作者：盘洪源
撰写时间：2019年5月22日星期三
想必有很多人会遇到一些页面在点击右键的时候会弹出来一个菜单栏，这个并不是系统的那个菜单栏，而是自定义的菜单，这个效果要如何实现，看以下代码：
CSS代码:
<div id="box"
style="width: 120px; height: 50px; position: absolute;display:none;z-index:9999;text-align:
center;background:white;box-shadow:1px 2px 3px black;">
<div>导出Excel</div>
<div>打印预览</div>
</div>Jquery代码：
document.oncontextmenu = function(){
return false;
}
$("#zhong").bind("contextmenu",
function (e) {
var key = e.which;
var x = e.clientX;
var y = e.clientY;
$("#box-data").show().css({
'left': x + 'px', 'top': y + 'px' });
});
$(document).click(function () {
$("#box-data").hide();
})在这里我要实现的鼠标右键的效果是怎么样的？在对应的地方点击右键，菜单就在对应的位置显示出来，而在单击任何地方的时候把菜单隐藏掉。这个效果要怎样做到？
上面这个代码怎么理解呢，
document.oncontextmenu = function(){
return false;
}这个就是把鼠标右键按钮弹出的浏览器菜单取消掉，这个不取消的等下这个鼠标右键事件就会弹出来两个菜单了。
再下面这一串代码，首先我这个是点击某个内容区的右键才弹出来菜单的，所以这个zhong是内容区的ID，然后就是获取鼠标点击的坐标位置，再把写好的菜单现在对应的坐标位置上。
$(document).click(function () {
$("#box-data").hide();
})这个是点击页面任何地方把菜单隐藏掉。
注意：
在菜单的css样式的最大div上要加个分层z-index:9999,还要加个绝对定位，这个是必须的。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/05/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
