So implementieren Sie ein benutzerdefiniertes Maus-Rechtsklick-Menü in JS-HTML-Tutorial-php.cn

So implementieren Sie ein benutzerdefiniertes Maus-Rechtsklick-Menü in JS

php中世界最好的语言

Freigeben： 2018-02-26 10:05:28

Original

3586 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie ein benutzerdefiniertes Maus-Rechtsklick-Menü mit JS implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung eines benutzerdefinierten Maus-Rechtsklick-Menüs mit JS? Werfen wir einen Blick darauf.

Passen Sie die Elemente des Maus-Rechtsklick-Menüs an:

Deaktivieren Sie das Standard-Rechtsklick-Ereignis auf der Seite

Legen Sie den Stil des Rechtsklick-Menüs und die Position fest Das Menü erscheint (durch Erfassen der Mausklickposition). Bestimmen Sie die Position des Menüs.)

Zeigen Sie das Menü an, wenn die Maus mit der rechten Maustaste auf das angegebene Steuerelement (Bereich) klickt (das Menü ist standardmäßig ausgeblendet und wird angezeigt, wenn die rechte Maustaste wird angeklickt)

Rendering

So implementieren Sie ein benutzerdefiniertes Maus-Rechtsklick-Menü in JS

Der Code lautet wie folgt:

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>

Nach dem Login kopieren

HTML

JS-Code

Die Positionierung des Menüs erfolgt hauptsächlich im ersten if-Anweisungsteil , gefolgt vom Bestätigungsschaltflächeneffekt.

menu1.style.left und menu1.style.top werden zum Positionieren des Menüs verwendet. Gemäß dem CSS-Stylesheet wird das Positionsattribut von menu1 absolut und style.top relativ positioniert Positionsattributwert, der ihm am nächsten liegt. Das übergeordnete Element, das nicht statisch ist, ist hier der Körper.

Die Position des Menüs muss entsprechend der spezifischen Situation des Seitenlayouts bestimmt werden, unabhängig davon, ob es sich um e.offsetX/Y, e.clientX/Y oder ein anderes Dokument handelt. Erwägen Sie hier das Hinzufügen einer Bildlaufleiste (eigentlich gibt es in diesem Beispiel keine Bildlaufleiste).

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后面的内容均不执行
}

Nach dem Login kopieren

JavaScript-Datei

CSS-Stylesheet

1/*Rechtsklick-Menü anpassen*/

.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;
}

Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Zusammenfassung des Boxmodells in HTML

Was sind die Auswirkungen der HTML-Semantik

Was sind die Layoutschemata für mobile Endgeräte in HTML?

So erstellen Sie ein Eingabetextfeld und einen Bildbestätigungscode.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein benutzerdefiniertes Maus-Rechtsklick-Menü in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!