關(guān)鍵點
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.要使點擊右鍵之后有事件發(fā)生奇昙，必須阻止左鍵的事件冒泡
e.preventDefault();//在事件觸發(fā)后的任何階段調(diào)用來取消該事件,
//意味著該事件的所有默認(rèn)動作都不會發(fā)生
//或者使用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) {}
})
})