Natives, benutzerdefiniertes Rechtsklickmenü von js

In diesem Artikelbeispiel wird der spezifische Code des benutzerdefinierten Rechtsklickmenüs von js zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Grundlegender Vorgang zum Auslösen des Rechtsklickmenüs

Um ein benutzerdefiniertes Rechtsklickmenü zu implementieren, müssen wir zunächst Folgendes verstehen:

Der grundlegende Vorgang zum Auslösen des Standard-Rechtsklickmenüs des Browsers

1) Klicken Sie mit der rechten Maustaste und das Menü wird angezeigt
2) Das Menü erscheint und der Mauspfeil befindet sich immer in der oberen linken Ecke des Menüs
3) Klicken Sie an einer anderen Stelle mit der rechten Maustaste. Das ursprüngliche Menü verschwindet und das neue Menü wird an der angegebenen Stelle angezeigt.
4) Klicken Sie auf die linke oder mittlere Schaltfläche und das Menü verschwindet.

Das Obige stellt einen groben Implementierungsprozess dar, ist nicht umfassend und dient nur als Referenz

Vielleicht ist der Text zu abstrakt, schauen wir uns den Code an:

2. HTML-Struktur

<!--Struktur des Start-Rechtsklickmenüs-->
<div id="rechtesMenü" class="rechtesMenü">
 <ul>
  <li deaktiviert="deaktiviert">
        <a href="#" >Zurück (B)</a> 
        <span>Alt+Pfeil nach links</span></li>
  <li><a href="#" >Vorwärts (F)</a> <span>Alt+Pfeil rechts</span></li>
  <li><a href="#" >Neu laden (R)</a> <span>Strg+R</span></li>
 </ul>
 <ul>
  <li><a href="#" >Speichern unter (A)...</a> <span>Strg+S</span></li>
        <li><a href="#" >Drucken(P)..</a> <span>Strg+P</span></li>
  <li><a href="#" >Projekt (C)...</a> <span>Strg+R</span></li>
 </ul>
 <ul>
  <li><a href="#" >Zeig dir deinen verdammten Code an (V)</a> <span>Strg+U</span></li>
     <li><a href="#" >Überprüfe deinen Idioten(N)</a> <span>Strg+Umschalt+L</span></li>
 </ul>
</div>
<!--Beenden der Struktur des Rechtsklickmenüs-->
  
<div Klasse="Box"></div>

3. CSS-Stile

*{
 Rand: 0;
 Polsterung: 0;
}
li{
 Listenstil: keiner;
}
.rechtesMenü{
 Breite: 250px;
 Hintergrund: #fff;
 Rand: 1px durchgezogen #bababa;
 Position: fest;
 Box-Größe: Rahmenbox;
 Anzeige: keine;
}
.rightmenu ul{
 Rahmen unten: 1px durchgezogen #e9e9e9;   
}
.rightmenu ul li{
 Höhe: 30px;
 Zeilenhöhe: 30px;
 Farbe: #000;
 Polsterung: 0 25px;
 Box-Größe: Rahmenbox;
 Rand: 2px 0;
     Cursor: Standard;
}
.rightmenu ul li:hover{
 Hintergrund: #ebebeb;
}
.rightmenu ul li a{
 Schriftgröße: 12px;
 Farbe: #000;
 Cursor: Standard;
 Textdekoration: keine;
}
.rightmenu ul li span{
 schweben: rechts;
 Schriftgröße: 12px;
 Farbe: #000;
}
.Kasten{
 Breite: 100px;
 Höhe: 100px;
 Hintergrund: rot;
}

.rightmenu setzt display:none, da das Rechtsklickmenü selbst ausgeblendet ist und nur erscheint, wenn darauf geklickt wird. Wenn dieser Satz nicht hinzugefügt wird, erscheint das Menü in der oberen linken Ecke der Seite.

3. JS-Implementierungsprozess

analysieren:

①: Der Browser selbst verfügt über ein Rechtsklickmenü. Wir möchten auch ein Rechtsklickmenü erstellen, daher sollten wir Rechtsklicks im Browser verhindern. Hier können wir preventDefault() verwenden, das die Funktion hat, Standardereignisse zu verhindern. Lernen wir, was Standardereignisse sind:

Beispiel: Klicken Sie darauf und Sie erfahren, dass Sie zu Baidu springen können, es gibt also eine Sprungzeit. Wir haben kein js verwendet, um dieses Ereignis zu implementieren. Es ist die Standardeinstellung, daher wird es als Standardereignis bezeichnet. Ähnlich verhält es sich mit dem Rechtsklickmenü des Browsers.

② Wir haben bereits erwähnt, dass sich der Mauszeiger beim Erscheinen des Menüs immer in der oberen linken Ecke des Menüs befindet. Wie wird dies erreicht? Dies betrifft die Koordinaten des Ereignisses im Ereignis. Die Position, auf die wir geklickt haben, ist die Position, an der das Rechtsklickereignis aufgetreten ist. Diese Position kann durch die Koordinaten clientX (die Position des Ereignisauftrittspunkts und des sichtbaren Bereichs), offsetX (die Position des Ereignisauftrittspunkts und des übergeordneten Elements), pageX (die Position des Ereignisauftrittspunkts und der Seite), screenX (die Position des Ereignisauftrittspunkts und des Bildschirms) erklärt werden. Hier verwenden wir offsetX/Y, da wir in BOW klicken, sodass Sie den spezifischen Grund durch eine Suche auf Baidu herausfinden können. Schauen wir uns den Code an, der im Detail gekennzeichnet ist.

<Skript>
 document.addEventListener('DOMContentLoaded',Funktion(){
 //Variable rightMenu abrufen=document.getElementById('rightmenu');
 //1. Schalten Sie zunächst das Standardverhalten der rechten Maustaste aus window.oncontextmenu=function(event){
  event.preventDefault();
  //2. Rechtsklickverhalten festlegen rightMenu.style.display="none"; //Blockiertes Menü zurücksetzen rightMenu.style.display="block";
  rechtesMenü.style.left=event.offsetX+'px';
   rechtesMenü.style.top=event.offsetY+'px';
  }
  //3. Entsprechend der rechten Maustaste im realen Browser kann die linke Taste das Rechtsklickmenü abbrechen document.onclick=function(event){
   rightMenu.style.display="keine";
  }
  //4. Die Funktion ist nicht perfekt und Sie müssen für jedes li ein BOM-Ereignis schreiben, das hier vorerst nicht geschrieben wird. //5. Überprüfen Sie es sorgfältig und Sie werden feststellen, dass ein kleines Problem auftritt, wenn sich die rechte Schaltfläche im von Ihnen definierten Rechtsklickmenü befindet. Sie können es selbst testen})
</Skript>

Das Obige dient nur als Referenz. Weitere Funktionen werden basierend auf ähnlichen Prinzipien implementiert. Okay, das ist alles.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.