關(guān)鍵點(diǎn)

1.阻止事件冒泡（阻止左鍵或者右鍵）
2.為點(diǎn)擊右鍵添加事件
3.獲取點(diǎn)擊之后的元素在屏幕的位置

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時(shí)為點(diǎn)擊了右鍵
          //1.要使點(diǎn)擊右鍵之后有事件發(fā)生，必須阻止左鍵的事件冒泡
          e.preventDefault();//在事件觸發(fā)后的任何階段調(diào)用來(lái)取消該事件,
                               //意味著該事件的所有默認(rèn)動(dòng)作都不會(huì)發(fā)生

        //或者使用stopPropagation()
          e.stopPropagation();
          return false;//但必須要return false
      }

    //3.獲取點(diǎn)擊之后的元素在屏幕的位置
      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) {}
        })
})