最终样式如下：
功能需求：和电脑桌面一样，灰色的是自定义桌面区域（或全屏，或固定大小范围，本次为固定大小举例），绿色的为右键菜单，当点击右键时，需显示菜单，左键单点消失。
**
实现思路：**
0、首先禁用浏览器自带默认右键行为。
1、两个盒子，一个桌面区域div，一个右键菜单div。
2、菜单默认隐藏，在桌面div中点击右键，显示菜单。
3、拿到右键点击的left和top值，并将弹窗定位到这个位置。
4、最后检查点击位置，控制菜单显示区域，防止菜单超出桌面。你需要知道的js方法：
1、右键事件：oncontextmenu
2、禁用浏览器默认行为 e.preventDefault()
3、获取div左上角坐标 div.offsetLeft 和 div.offsetTop
4、获取div实际宽高 div.getBoundingClientRect().width 和 div.getBoundingClientRect().height
5、Dom基本操作开始：
现将样式写出来：
HTML代码：
<div id="box">
<div id="menu">右键菜单</div>
</div>
CSS代码：
<style>
#box {
width: 1000px;
height: 600px;
background: #Ccc;
margin: 0 auto;
margin-top: 100px
}
#menu {
position: absolute;
min-width: 100px;
height: 200px;
background: #9f9;
display: none;
}
</style>实现js逻辑：
var box = document.getElementById('box'); // 桌面区域
var menu = document.getElementById('menu') // 右键菜单
let b_w = box.getBoundingClientRect().width; // 桌面区域宽度
let b_h = box.getBoundingClientRect().height; // 桌面区域高度
let b_cX = box.offsetLeft; // box左上角left
let b_cY = box.offsetTop; // box左上角top
box.oncontextmenu = function (e) { // 右键事件
menu.style.display = "block"; // 菜单显示
menu.style.top = e.clientY + 'px' // 根据点击位置定位菜单位置top
menu.style.left = e.clientX + 'px' // 根据点击位置定位菜单位置left
let m_w = menu.getBoundingClientRect().width; // 菜单宽度
let m_h = menu.getBoundingClientRect().height; // 菜单高度
// 控制菜单弹出区域，不能超过桌面右侧和下侧最大范围
if (e.clientX > (b_cX + b_w - m_w)) {
menu.style.left = (e.clientX - m_w) + 'px' // 如果菜单超出桌面宽度，让菜单向左偏移本身宽度
}
if (e.clientY > (b_cY + b_h - m_h)) {
menu.style.top = (b_cY + b_h - m_h - 5) + 'px' // 如果菜单超出桌面高度，让菜单定位到这个位置，为了美观，菜单栏与底部桌面留有5px间距
}
}
// window区域点击菜单栏均消失
window.onclick = function (e) {
menu.style.display = "none";
}
// 禁用window区域右键默认菜单弹窗
window.oncontextmenu = function (e) {
e.preventDefault();
}-
-
-
以上就是博主实现的右键菜单实现方式，如果有更好的方式，欢迎沟通。
wechat：villinWeChat
