Home > Article > Web Front-end > How to implement custom mouse right-click menu in JS

How to implement custom mouse right-click menu in JS

php中世界最好的语言Original: 2018-02-26 10:05:283596browse

This time I will show you how to implement a custom mouse right-click menu with JS. What are the precautions for 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

How to implement custom mouse right-click menu in JS

The code is as follows:

HTML code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="right-click.css" />
</head>
<body>
    <div id="contain-friend">右击显示菜单</div>
    <label id="label1"></label>
    <div id="menu-friend">
        <div>
            <button id="btn1">菜单一</button>
        </div>
        <div>
            <button id="btn2">菜单二</button>
        </div>
    </div>
    <script src="right-click.js"></script>
</body>
</html>

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 of page 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!

How to implement custom mouse right-click menu in JS

Related articles