Web-FrontendHTML-TutorialSo implementieren Sie ein benutzerdefiniertes Maus-Rechtsklick-Menü in JSSo implementieren Sie ein benutzerdefiniertes Maus-Rechtsklick-Menü in JS
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
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>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后面的内容均不执行
}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;
}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!
Die Vielseitigkeit von HTML: Anwendungen und AnwendungsfälleApr 30, 2025 am 12:03 AMHTML ist nicht nur das Skelett von Webseiten, sondern wird auch in vielen Bereichen häufiger verwendet: 1. In der Webseitenentwicklung definiert HTML die Seitenstruktur und kombiniert CSS und JavaScript, um reichhaltige Schnittstellen zu erreichen. 2. In der Entwicklung der mobilen Anwendungen unterstützt HTML5 Offline -Speicher- und Geolokationsfunktionen. 3. In E -Mails und Newslettern verbessert HTML das Format- und Multimedia -Effekte von E -Mails. 4. In der Spielentwicklung wird die Canvas -API von HTML5 verwendet, um 2D- und 3D -Spiele zu erstellen.
Was ist das Root -Tag in einem HTML -Dokument?Apr 29, 2025 am 12:10 AMTheroottaginanhtmldocumentis.itServesasthetop-LevelelementthateCapsulatesAllotherContent, um ProperDocumentStructureandBrowserParsing zu gewährleisten.
Sind die HTML -Tags und Elemente dasselbe?Apr 28, 2025 pm 05:44 PMDer Artikel erklärt, dass HTML -Tags Syntaxmarker sind, die zum Definieren von Elementen verwendet werden, während Elemente vollständige Einheiten einschließlich Tags und Inhalt sind. Sie arbeiten zusammen, um Webseiten zu strukturieren.Character Count: 159
Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Apr 28, 2025 pm 05:43 PMDer Artikel erörtert die Rollen von & lt; Head & gt; und & lt; Körper & gt; Tags in HTML, ihre Auswirkungen auf die Benutzererfahrung und die SEO -Auswirkungen. Die ordnungsgemäße Strukturierung verbessert die Funktionen der Website und die Suchmaschinenoptimierung.
Was ist der Unterschied zwischen & lt; stark & gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PMDer Artikel erörtert die Unterschiede zwischen HTML -Tags, und sich auf ihre semantischen und präsentierenden Verwendungen und ihre Auswirkungen auf SEO und Barrierefreiheit konzentrieren.
Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Apr 28, 2025 pm 05:41 PMIn Artikel wird die Angabe der Charaktercodierung in HTML erläutert, die sich auf UTF-8 konzentriert. Hauptproblem: Sicherstellen, dass die korrekte Anzeige des Textes verstümmelt und die SEO und die Zugänglichkeit verbessert werden.
Was sind die verschiedenen Formatierungs -Tags in HTML?Apr 28, 2025 pm 05:39 PMIn dem Artikel werden verschiedene HTML -Formatierungs -Tags erörtert, die zur Strukturierung und Styling -Webinhalte verwendet werden, wodurch ihre Auswirkungen auf das Erscheinungsbild von Text und die Bedeutung semantischer Tags für Barrierefreiheit und SEO betont werden.
Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Apr 28, 2025 pm 05:39 PMDer Artikel erörtert die Unterschiede zwischen den Attributen von HTMLs "ID" und "Klasse" und konzentriert sich auf ihre Einzigartigkeit, ihren Zweck, ihre CSS -Syntax und ihre Spezifität. Es erklärt, wie sich ihre Verwendung auf das Webseite und die Funktionalität des Webseite auswirkt, und bietet Best Practices für
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
