Native js custom right click menu

In this article, we share the specific code of js custom right-click menu for your reference. The specific contents are as follows

1. The basic process of right-click menu triggering

To implement a custom right-click menu, we first need to know the following:

The basic process triggered by the browser's default right-click menu

1), right-click and the menu appears
2), the menu appears, the mouse arrow 1 straight in the upper left corner of the menu
3) Right-click in another position, the original menu disappears, and the new menu appears in the specified position
4) Click the left key and the middle key, and the menu disappears

The above is the general implementation process, not comprehensive, for reference only

Maybe the text is too abstract, let's take a look at the code:

2. HTML structure

<!--start Structure of right-click menu -->
<div id="rightmenu" class="rightmenu">
 <ul>
  <li disabled="disabled">
        <a href="#" > Return (B)</a> 
        <span>Alt+ Left arrow </span></li>
  <li><a href="#" > Advance (F)</a> <span>Alt+ Rightwards arrow </span></li>
  <li><a href="#" > Reload (R)</a> <span>Ctrl+R</span></li>
 </ul>
 <ul>
  <li><a href="#" > Save As (A)...</a> <span>Ctrl+S</span></li>
        <li><a href="#" > Print (P)..</a> <span>Ctrl+P</span></li>
  <li><a href="#" > Projection (C)...</a> <span>Ctrl+R</span></li>
 </ul>
 <ul>
  <li><a href="#" > Check your hammer code (V)</a> <span>Ctrl+U</span></li>
     <li><a href="#" > Check your skin (N)</a> <span>Ctrl+Shift+L</span></li>
 </ul>
</div>
<!--end Structure of right-click menu -->
  
<div class="box"></div>

3. CSS style

*{
 margin: 0;
 padding: 0;
}
li{
 list-style: none;
}
.rightmenu{
 width: 250px;
 background: #fff;
 border: 1px solid #bababa;
 position: fixed;
 box-sizing: border-box;
 display: none;
}
.rightmenu ul{
 border-bottom: 1px solid #e9e9e9;   
}
.rightmenu ul li{
 height: 30px;
 line-height: 30px;
 color: #000;
 padding: 0 25px;
 box-sizing: border-box;
 margin: 2px 0;
     cursor: default;
}
.rightmenu ul li:hover{
 background: #ebebeb;
}
.rightmenu ul li a{
 font-size: 12px;
 color: #000;
 cursor: default;
 text-decoration: none;
}
.rightmenu ul li span{
 float: right;
 font-size: 12px;
 color: #000;
}
.box{
 width: 100px;
 height: 100px;
 background: red;
}

. rightmenu Set display: none because the right-click menu itself is hidden and appears only after clicking. If this sentence is not added, the menu will appear in the upper left corner of the page.

3. Implementation process of js

Analysis:

①: The browser itself has a right-click menu, and we also need to make a right-click menu, so we should block the right-click of the browser. preventDefault () can be used here. This method has the function of blocking default events. Under Popular Science 1, what is the default event:

For example, I can know that this can jump to Baidu, so there is a jump time. We didn't use js to realize this event. It is the default, so it is called the default event. Similarly, the browser right-click menu.

② We said earlier that the menu appeared, The mouse arrow 1 is straight in the upper left corner of the menu, How did this come about? This involves the event coordinates in event. Where we click is where we right-click the event, You can explain this position in terms of coordinates, clientX (location of event occurrence point and visual area), offsetX (location of event occurrence point and parent element), pageX (location of event occurrence point and page), screenX (location of event occurrence point and screen), here we use offsetX/Y, because we click in BOW, so the specific reasons are straight under Baidu 1. Let's look at the code.

<script>
 document.addEventListener('DOMContentLoaded',function(){
 // Get 
 var rightMenu=document.getElementById('rightmenu');
 //1. First turn off the right-click default behavior 
 window.oncontextmenu=function(event){
  event.preventDefault();
  //2. Set the right-click behavior 
  rightMenu.style.display="none";// Reset already block Menu of 
  rightMenu.style.display="block";
  rightMenu.style.left=event.offsetX+'px';
   rightMenu.style.top=event.offsetY+'px';
  }
  //3. According to the real browser's right button, the left button can cancel the right button menu 
  document.onclick=function(event){
   rightMenu.style.display="none";
  }
  //4. The function is not perfect , Need to give each li Write BOM Events , I won't write here for the time being 
  //5. If you check carefully, you will find that when the right button is on the right button menu defined by yourself, , Will appear 1 A small situation , You can test it yourself 
    })
</script>

The above is for reference only, and more functions are realized in the same principle. OK, it's over.