Customize right-click menu

Customized right-click menu

Customized right-click menu. For some ERP systems, there are many functional operations, so we usually put several commonly used functions in the customized right-click menu for the convenience of users.

Implementing a custom menu is very simple. First, we need to block the original right-click menu. The custom menu appears at the position of the mouse. Click to hide the custom menu. This is the process.

*{margin:0;padding:0}
a{text-decoration:none}
ul li{list-style:none}
.menu{border:1px solid black;border-radius:5px;display:inline-block;position:fixed;top:100px;left:550px;
overflow:hidden;padding-bottom:10px;box-shadow:0 0 10px 0;z-index:999;display:none;background:white}
.menu ul li{height:30px;width:100%}
.menu ul li a{height:30px;display:inline-block;width:100%;text-align:left;line-height:30px;padding:5px 10px}
.menu li a:hover{background-color:#EEF5E2}

<div class="menu" id="demo">
    <ul>
        <li><a href="#">向录入员发送消息</a></li>
        <li><a href="#">发送选中作业</a></li>
        <li><a href="#">设置作业状态</a></li>
        <li><a href="#">哈哈哈哈哈</a></li>
        <li><a href="#">嘻嘻嘻嘻嘻</a></li>
        <li><a href="#">呵呵呵呵呵呵</a></li>
    </ul>
  </div>

　1. Shield the original right-click menu

　There is an event provided in JS to accomplish this, which is oncontextmenu. This is the event-bound area. When you right-click, the original right-click menu will no longer appear:

document.oncontextmenu = function(){  return false;
}

2. Get the size of the custom menu

　 The custom menu is initially hidden, and we have no way to get the width and height of hidden elements. We can first set the menu element to visibility: hidden, get the width and height of the element, and then remove this attribute:

function getHideDOMWH(obj){
      //obj为菜单元素的DOM对象
      var wh = {};
      obj.style.visibility = "hidden";
      wh.w = obj.scrollWidth;
      wh.h = obj.scrollHeight;
      obj.style.visibility = null;
      return wh;
  }

　 3. The custom menu appears at the current mouse position

First we need to get the current mouse position , the current mouse position is where the custom menu appears. At the same time, pay attention to the situation where the distance from the right or the distance from below is not enough to display the menu:

document.onmousedown = function(e){
    //obj为菜单元素DOM对象
    var e = e || window.event;
    if(e.button==2){
        var left = e.clientX;
        var top = e.clientY;
        var windowHeight = document.body.scrollHeight;
        var windowWidth = document.body.scrollWidth;
        var wh = getHideDOMWH(obj);
        var contentHeight = wh.h;
        var contentWidth = wh.w;
        obj.style.left = windowWidth-left>contentWidth?left+"px":windowWidth-contentWidth+"px";
        obj.style.top = windowHeight-top>contentHeight?top+"px":top-contentHeight+"px";
        obj.style.display = "inline-block";
    }
}

When the width of the browser window minus the distance from the left when the cursor is clicked is less than the width of the menu, it means the distance from the cursor to the right It is no longer enough to display the menu, so we let the menu stick to the right. At this time, the left value of the menu is the width of the browser window minus the width of the menu. When the height of the browser window minus the distance from the cursor to the upper side is less than the height of the menu, it means that the distance from the cursor to the bottom is not enough to display the menu. At this time, the top value of the menu is the distance from the cursor to the top minus the distance of the menu. high.

　4. Hide the menu whether you click on the menu element or other elements

document.onclick = function(){    //obj为菜单元素DOM对象
    obj.style.display = "none";
}

For ease of use, we can encapsulate the above process into a method, or extend a method on the prototype of the native JS Element (IE7 and below are will report an error), or on the prototype of JQ, here we encapsulate a method.

function contextMenu(obj){
      //obj为DOM对象
      document.oncontextmenu = function(){
          return false;
      }
      document.onmousedown = function(e){
          var e = e||window.event;
          if(e.button==2){
              var mouseX = e.clientX;
              var mouseY = e.clientY;
              var wh = getObjWH(obj);
              var contentW = wh.w;
              var contentH = wh.h;
              var documentW = document.body.scrollWidth;
              var documentH = document.body.scrollHeight;
              obj.style.left = documentW-mouseX<contentW?documentW-contentW+"px":mouseX+"px";
              obj.style.top = documentH-mouseY<contentH?mouseY-contentH+"px":mouseY+"px";
              obj.style.display = "inline-block";
          }
          
      }
      document.onclick = function(){
          obj.style.display = "none";
      }
      function getObjWH(obj){
          var wh = {};
          obj.style.visibility = "hidden";
          wh.w = obj.scrollWidth;
          wh.h = obj.scrollHeight;
          obj.style.visibility = null;
          return wh;
      }
  }

All our events are bound to the document, and we usually use the bubbling mechanism for events. If we set cancel bubbling on a certain element, there will be some problems, and we need to do something targeted. deal with.