关键点
1.阻止事件冒泡（阻止左键或者右键）
2.为点击右键添加事件
3.获取点击之后的元素在屏幕的位置
HTML
<ul class="menu" display="none">//隐藏右键列表
<li><a hred="#">menu1</a></li>
<li><a hred="#">menu2</a></li>
<li><a hred="#">menu3</a></li>
</ul>
JS
$ = function(e){
return document.querySelector(e);
}
var menu = $(".menu");
var body = document.body;
document.addEventListener("mousedown",function(e){
if(window.event) e = window.event;//事件兼容性
if( e.button ==2){ //button=2时为点击了右键
//1.要使点击右键之后有事件发生，必须阻止左键的事件冒泡
e.preventDefault();//在事件触发后的任何阶段调用来取消该事件,
//意味着该事件的所有默认动作都不会发生
//或者使用stopPropagation()
e.stopPropagation();
return false;//但必须要return false
}
//3.获取点击之后的元素在屏幕的位置
menu.style.display = "block";
//menu的大小
var menuWid = menu.offsetWidth;
var menuHei = menu.offsetheight;
//元素位置
let currentX = e.clientX + menuWidth > body.clientWidth ? e.clientX - menuWidth : e.clientX;
let currentY = e.clientY + menuHeight > body.clientHeight ? e.clientY - menuHeight : e.clientY;
menu.style.left = currentX + "px";
menu.style.top = currentY + "px";
}
//取消右键事件
body.addEventListener("click",function(e){
menu.style.display = "none";
document.oncontextmenu = function(e) {}
})
})