Custom right-click menu

User-Defined right-click menu. For some ERP systems, there are many function operations, so we usually put several common functions in the User-Defined right-click menu for your convenience. Custom right-click menu

User-Defined right-click menu. For some ERP systems, there are many function operations, so we usually put several common functions in the User-Defined right-click menu for your convenience.

It is easy to implement a custom menu. First, we need to shield the original right-click menu. The custom menu appears at the mouse position and 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}

    
 
 
        
  
  
Send messages to the recorder
        
  
  
Send selected job
        
  
  
Set job status
        
  
  
Haha
        
  
  
Giggle
        
  
  
Haha
    
 
 
  

1. shield the original right-click menu

Oncontextmenu provides an event in JS to complete this task. This is the event binding area. When you right-click the event, 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 hidden at the beginning. For hidden elements, we cannot obtain its width and height. We can first set the menu element to visibility: hidden. After obtaining the width and height of the element, we can remove this attribute:

Function getHideDOMWH (obj) {// obj is the DOM object var wh ={} of the menu element. 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 obtain the current mouse position. The current mouse position is the position where the custom menu appears. At the same time, note that the distance from the right side or below is not enough to display the menu:

Document. onmousedown = function (e) {// obj is the menu element DOM object var e = e | window. event; if (e. button = 2) {var left = e. clientX; var top = e. clientY; var returns wheight = document. body. scrollHeight; var expose wwidth = document. body. scrollWidth; var wh = getHideDOMWH (obj); var contentHeight = wh. h; var contentWidth = wh. w; obj. style. left = descriwwidth-left> contentWidth? Left + "px": Required wwidth-contentWidth + "px"; obj. style. top = required wheight-top> contentHeight? Top + "px": top-contentHeight + "px"; obj. style. display = "inline-block ";}}

When the distance between the browser window width and the cursor clicking is smaller than the menu width on the left, it means that the distance between the cursor and the right is not enough to display the menu, so we can keep the menu close to the right, the left value of the menu is the width of the browser window minus the menu width. When the distance between the browser window and the cursor from the top side is smaller than the menu height, it means that the distance between the cursor and the bottom is not enough to display the menu, the top value of the menu is the distance from the cursor to the top minus the menu height.

4. Hide menus by clicking menu elements or other elements

Document. onclick = function () {// obj is the menu element DOM object obj. style. display = "none ";}

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

Function contextMenu (obj) {// obj is the DOM object 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 implements enth = document. body. scrollHeight; obj. style. left = documentW-mouseX
 
  
All of our events are bound to the document, and events usually use the bubble mechanism. If we set the cancel bubble mechanism on an element, there will be some problems, we need to do some targeted processing.