Native js custom right-click menu

This article example shares the specific code of js custom right-click menu for your reference. The specific content is as follows

1. Basic process of right-click menu triggering

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

The basic process of triggering the browser's default right-click menu

1) Right click and the menu appears
2) The menu appears, and the mouse arrow is always in the upper left corner of the menu
3) Click the right button in another location, the original menu disappears, and the new menu appears in the specified location
4) Click the left or middle button, and the menu disappears.

The above is a rough implementation process, not comprehensive, for reference only

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

2. HTML structure

<!--Structure of the start right-click menu-->
<div id="rightmenu" class="rightmenu">
 <ul>
  <li disabled="disabled">
        <a href="#" >Back (B)</a> 
        <span>Alt+Left Arrow</span></li>
  <li><a href="#" >Forward (F)</a> <span>Alt+Right 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="#" >Project (C)...</a> <span>Ctrl+R</span></li>
 </ul>
 <ul>
  <li><a href="#" >View your fucking code (V)</a> <span>Ctrl+U</span></li>
     <li><a href="#" >Check your idiot(N)</a> <span>Ctrl+Shift+L</span></li>
 </ul>
</div>
<!--end the structure of the right-click menu-->
  
<div class="box"></div>

3. CSS styles

*{
 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 sets display:none because the right-click menu itself is hidden and only appears when it is clicked. If this sentence is not added, the menu will appear in the upper left corner of the page.

3. js implementation process

analyze:

①: The browser itself has a right-click menu, and we also want to make a right-click menu, so we should prevent the browser's right-click. Here we can use preventDefault(), which has the function of preventing default events. Let's learn what default events are:

For example: Click on it and you will know that you can jump to Baidu, so there is a jump time. We did not use js to implement this event. It is the default, so it is called the default event. Similarly, the browser right-click menu.

② We said earlier that when the menu appears, the mouse arrow is always in the upper left corner of the menu. How is this achieved? This involves the coordinates of the event in the event. The position we clicked is the position where the right-click event occurred. This position can be explained by coordinates, clientX (the position of the event occurrence point and the visible area), offsetX (the position of the event occurrence point and the parent element), pageX (the position of the event occurrence point and the page), screenX (the position of the event occurrence point and the screen). Here we use offsetX/Y, because we are clicking in BOW, so you can find out the specific reason by searching on Baidu. Let's take a look at the code, which is marked in detail.

<script>
 document.addEventListener('DOMContentLoaded',function(){
 //Get var rightMenu=document.getElementById('rightmenu');
 //1. First, turn off the default behavior of the right button window.oncontextmenu=function(event){
  event.preventDefault();
  //2. Set the right-click behavior rightMenu.style.display="none"; //Reset the blocked menu rightMenu.style.display="block";
  rightMenu.style.left=event.offsetX+'px';
   rightMenu.style.top=event.offsetY+'px';
  }
  //3. According to the right button of the real browser, the left button can cancel the right-click menu document.onclick=function(event){
   rightMenu.style.display="none";
  }
  //4. The function is not perfect, and you need to write a BOM event for each li, which is not written here for the time being //5. Check carefully and you will find that when the right button is on the right-click menu you defined, there will be a small problem. You can test it yourself})
</script>

The above is for reference only. More functions are implemented based on similar principles. Okay, that’s it.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.