How to implement custom mouse right-click menu in JS

This time I will show you how to implement a custom mouse right-click menu with JS. What are theprecautionsfor implementing a custom mouse right-click menu with JS. The following is a practical case, let’s take a look.

Customize the mouse right-click menu elements:

Disable the default right-click event on the page

Set the style of the right-click menu and the location where the menu appears (by capturing the mouse click position) Determine the location of the menu)

Display the menu when the mouse right-clicks on the specified control (area) (the default menu is hidden and displayed when the right button of the mouse is clicked)

Rendering

The code is as follows:

HTML code

        
  
右击显示菜单
  
 
 菜单一 
 
 菜单二 
 
   

HTML

JS Code

The positioning of the menu is mainly in the first if statement part, followed by the verification button effect.

Menu1.style.left and menu1.style.top are used to position the menu. According to the css style sheet, the position attribute of menu1 is positioned as absolute, and style.top is positioned relative to the position attribute value closest to it. The parent element that is not static, here is the body.

The position of the menu needs to be determined according to the specific situation ofpage layout, whether it is e.offsetX/Y, e.clientX/Y or others. Add document.documentElement.scrollTop here. Consider adding a scroll bar (actually there is no scroll bar in this example).

window.onload = function() { //以下为自定义右击菜单 document.oncontextmenu = function(e) { //阻止执行浏览器默认右击事件 e.preventDefault(); //聊天室好友列表 if (document.getElementById("menu-friend")) { var menu1 = document.getElementById("menu-friend"); menu1.style.display = "block"; document.getElementById("contain-friend").onmousedown = function(e) {　　　　　 //菜单定位 menu1.style.left = e.offsetX + "px"; menu1.style.top = document.documentElement.scrollTop + e.clientY + "px"; //alert(menu1.style.top) if (document.getElementById("contain-friend")) { if (e.button == 2) { menu1.style.visibility = "visible"; } else { menu1.style.visibility = "hidden"; } } } } } if (document.getElementById("btn1")) { document.getElementById("btn1").onmousedown = function(e) { document.getElementById("label1").innerHTML = "你点击了菜单一" } } if (document.getElementById("btn2")) { document.getElementById("btn2").onmousedown = function(e) { document.getElementById("label1").innerHTML = "你点击了菜单二" } } return false; //与e.preventDefault();功能相同，但是必须放在最后否则在return后面的内容均不执行 }

JavaScript file

CSS style sheet

1/*Customize the right-click menu*/

.contain { background-color: #D1CEBC; height: 100px; width: 300px; } .menu { width: 150px; background-color: white; visibility: hidden; position: absolute; box-shadow: 0px 0px 10px #D1CEBC } .menu-item { background-color: #fff; margin: 0; } .menu-item-btn { width: 146px; margin: 2px; border: 0; text-align: left; padding-left: 60px; padding-top: 5px; padding-bottom: 5px; background-color: #fff; color: #000; } .menu-item-btn:hover { background-color: #D1CEBC; }

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Summary of the box model in HTML

What are the functions of html semantics

What are the layout schemes for mobile terminals in HTML

How to make the input text box and img verification code

The above is the detailed content of How to implement custom mouse right-click menu in JS. For more information, please follow other related articles on the PHP Chinese website!