js Realizes Right click Pop up User defined Menu

Recently, there is a demand for a right-click menu in the project, and it is found that many implementations are complicated, so I spent 1 point of time slightly studying 1, and provided a concise implementation method below.

js Declaration Section:

// Create a right-click menu 
var epMenu={
  create:function(point,option){
    var menuNode=document.getElementById('epMenu');
    if(!menuNode){
      // Created when there is no menu node 1 A 
      menuNode=document.createElement("div");
      menuNode.setAttribute('class','epMenu');
      menuNode.setAttribute('id','epMenu');
    }else $(menuNode).html('');// Empty the contents inside 

    $(menuNode).css({left:point.left+'px',top:point.top+'px'});
    for(var x in option){
      var tempNode=document.createElement("a");
      $(tempNode).text(option[x]['name']).on('click',option[x].action);
      menuNode.appendChild(tempNode);
    }

    $("body").append(menuNode);
  },
  destory:function(){
    $(".epMenu").remove();
  }  
};

function sayhello(){
  alert("hellokity");
  epMenu.destory();
}

function hideSysMenu() {
  return false;
}

css Style Definition Section:

.epMenu{ width:120px; background:#f0f0f0; position:fixed; left:0; top:0; box-shadow:2px 2px 2px 2px #807878;}
.epMenu a{ display:block; height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; font-family: Microsoft Yahei ; font-size:14px; cursor:default;}
.epMenu a:hover{ background:#fff;}

Here's the custom invocation section of the menu:

document.onmousedown = function(e){
    var menuNode=document.getElementById('epMenu');
    if(e.button===2){
      document.oncontextmenu = hideSysMenu;// Mask the right mouse button 
      var evt = window.event || arguments[0];
      var rightedge = evt.clientX;
      var bottomedge = evt.clientY;
      epMenu.create({left:rightedge,top:bottomedge},[{name:'a1','action':sayhello},{name:'b2','action':sayhello},{name:'c3','action':sayhello},{name:'c4','action':sayhello}]);  
    }
//   epMenu.destory();
  }

Simple analysis 1:

1. The first parameter of epMenu. create method is the position coordinate of menu pop-up (distance from the upper left corner of the screen). Here, the coordinates of mouse click are used, and the menu pops up with mouse click; The second parameter is a data in json format, which is used to customize menu items. name is the name of menu items, and action is the action after clicking menu items (which can be functions, ajax requests, etc.).

2. Values of e. button: 2 means right click, 0 means left click, and 4 means click key (ie). button values of different browsers are different, so only ie11 is used as reference here.

3. Note that before creating a custom menu, 1 must block the default right-click menu of the system, which is very important! ! !

Finally, this simple right-click menu function is still a little flawed. After the right-click menu pops up, the menu will not close automatically without clicking on the menu item. It will be improved later when you are free.