How to implement custom mouse right-click menu in JS-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to implement custom mouse right-click menu in JS

php中世界最好的语言

Feb 26, 2018 am 10:05 AM

javascriptaccomplishcustomize

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!

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn