Javascript自定义右键

关键点

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) {}
        })
})