Customizing the right-click menu

Customizing the right-click menu

The general level of technology is limited, there is nothing wrong, I hope you correct.

Custom Right-click menu, for some ERP system, the function of a lot of operations, so we usually put a few common functions in the custom right-click menu to facilitate user use.

The implementation of the custom menu is very simple, first we want to block the original right-click menu, the custom menu appears in the mouse position, click the Hide 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= "#" > Send message to Input </a></li>        <li><a href= "#" > Send selected Jobs </a></li>        <li><a href= "#" > Set job Status </a> </li>        <li><a href= "#" > Hahaha </a></li>        <li><a href= "#" > Hee hee Hee-ha < /a></li>        <li><a href= "#" > Ha ha ha hehe </a></li>    </ul>  </div>

1. Block the original right-click menu

In JS provides an event to complete this thing is OnContextMenu, this is the event bound area when the right click will no longer appear the original right-click menu:

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 its wide height for hidden elements. We can first set the menu element to Visibility:hidden, get the width of the element after the property is removed:

  function Gethidedomwh (obj) {      //obj is the DOM object for the menu element      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. Also be aware that the distance from the right or the distance below is insufficient to display the menu:

Document.onmousedown = function (e) {    //obj is a menu element Dom Object    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 side of the cursor is less than the width of the menu, the distance to the right of the cursor is not enough to display the menu, we let the menu close to the right, 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 upper side of the cursor is less than the height of the menu, it indicates that the distance below the cursor is not enough to display the menu, and the top value of the menu is the distance from the cursor above the height of the menu.

4. Either click the menu element or the other element to hide the menu

Document.onclick = function () {    //obj is a menu element dom object    Obj.style.display = "None";}

For ease of use we can encapsulate the above process as a method, or extend a method on the prototype of the native JS element (IE7 and the following will be an error), or the JQ prototype, where we encapsulate a method.

  function ContextMenu (obj) {//obj is a 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 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 of our events are bound to document and events we usually use the bubbling mechanism, and if we set the cancel bubbling on an element we have some problems, we need to do some specific processing.

Customizing the right-click menu