Ich möchte meiner Webanwendung ein benutzerdefiniertes Kontextmenü hinzufügen. Kann dies ohne Verwendung vorgefertigter Bibliotheken erfolgen? Wenn ja, wie wird ein einfaches benutzerdefiniertes Rechtsklick-Menü angezeigt, das keine JavaScript-Bibliothek eines Drittanbieters verwendet?
Ich strebe so etwas wie Google Text & Tabellen an. Hier können Benutzer mit der rechten Maustaste klicken und den Benutzern ihr eigenes Menü anzeigen.
HINWEIS: Ich möchte lernen, wie ich meine eigenen erstellen kann, anstatt etwas zu verwenden, das bereits von jemandem erstellt wurde, da diese Bibliotheken von Drittanbietern die meiste Zeit mit Funktionen gefüllt sind, während ich nur Funktionen möchte, die ich benötige, damit sie vollständig von Hand erstellt werden mich.
quelle
Antworten:
Beantwortung Ihrer Frage - verwenden Sie das
contextmenu
Ereignis wie folgt:Sie sollten sich jedoch fragen, ob Sie das Standard-Rechtsklickverhalten wirklich überschreiben möchten - dies hängt von der Anwendung ab, die Sie entwickeln.
JSFIDDLE
quelle
e.preventDefault();
. Aus diesem Grund wird das reguläre Menü nicht angezeigt. Was Sie tun können, ist eine bedingte Logik zu erstellen, die prüft, ob die Taste gedrückt wird, während Sie mit der rechten Maustaste klicken und dann NICHT anrufen. Dann erhaltene.preventDefault()
Sie ein reguläres Browser-Menü.War sehr nützlich für mich. Für Leute wie mich, die die Zeichnung des Menüs erwarten, habe ich hier den Code eingefügt, mit dem ich das Kontextmenü erstellt habe:
quelle
mouseY(event)
undmouseX(event)
mitpx
, damit es wie erwartet funktioniert: http://jsfiddle.net/a6w7n64o/ .test
aber es gibt kein Element mit der ID vontest
. Nur Elemente mit der Klasse vontest
.jQuery
ist wirklich nicht so aufgebläht mit zusätzlichen Sachen. Nicht in dem Maße, dass es etwas verlangsamen würde. Es ist sehr nützlich und das gleiche,jQuery
das in dieser Antwort verwendet wird, kann leicht in Standardbefehle konvertiertJavaScript
werden. Es stimmt möglicherweise nicht zu 100% mit der Anfrage in der ursprünglichen Frage überein, aber es stimmt definitiv zu 95% mit der Anfrage überein.Eine Kombination aus einigen netten CSS- und einigen nicht standardmäßigen HTML-Tags ohne externe Bibliotheken kann zu einem guten Ergebnis führen (JSFiddle).
HTML
Hinweis: Das Menü-Tag existiert nicht, ich mache es (Sie können alles verwenden)
CSS
Das JavaScript ist nur für dieses Beispiel, ich persönlich entferne es für dauerhafte Menüs unter Windows
Beachten Sie auch, dass Sie möglicherweise Änderungen
menu > menu{left:100%;}
anmenu > menu{right:100%;}
einem Menü vornehmen können, das von rechts nach links erweitert wird. Sie müssten jedoch irgendwo einen Rand oder etwas hinzufügenquelle
Entsprechend den Antworten hier und in anderen Abläufen habe ich eine Version erstellt, die der von Google Chrome mit CSS3-Übergang ähnelt. JS Fiddle
Fangen wir eifrig an, da wir die js oben auf dieser Seite haben, können wir uns um das CSS und das Layout kümmern. Das Layout, das wir verwenden werden, ist ein
<a>
Element mit einem<img>
Element oder einem Schriftarten-Symbol (<i class="fa fa-flag"></i>
) und einem<span>
, um die Tastaturkürzel anzuzeigen. Das ist also die Struktur:Wir werden diese in ein Div einfügen und dieses Div mit der rechten Maustaste anzeigen. Gestalten wir sie wie in Google Chrome.
Jetzt fügen wir den Code aus der akzeptierten Antwort hinzu und erhalten den X- und Y-Wert des Cursors. Dazu verwenden wir
e.clientX
unde.clientY
. Wir verwenden Client, daher muss das Menü div korrigiert werden.Und das ist alles! Fügen Sie einfach die CSS-Übergänge hinzu, um sie ein- und auszublenden, und fertig!
Code-Snippet anzeigen
quelle
Sie können versuchen, das Kontextmenü einfach zu blockieren, indem Sie Ihrem Body-Tag Folgendes hinzufügen:
Dadurch wird der gesamte Zugriff auf das Kontextmenü blockiert (nicht nur über die rechte Maustaste, sondern auch über die Tastatur).
PS Sie können dies zu jedem Tag hinzufügen, für das Sie das Kontextmenü deaktivieren möchten
beispielsweise:
Deaktiviert das Kontextmenü nur in diesem bestimmten Div
quelle
Getestet und funktioniert in Opera 11.6, Firefox 9.01, Internet Explorer 9 und Chrome 17. Sie können ein funktionierendes Beispiel im Javascript-Kontextmenü überprüfen
quelle
Ich weiß, dass dies bereits beantwortet wurde, aber ich habe einige Zeit damit verbracht, mit der zweiten Antwort zu ringen, damit das native Kontextmenü verschwindet und dort angezeigt wird, wo der Benutzer geklickt hat.
HTML
CSS
JavaScript
CodePen-Beispiel
quelle
Versuche dies
http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/
quelle
Reine JS- und CSS-Lösung für ein wirklich dynamisches Kontextmenü mit Rechtsklick, wenn auch basierend auf vordefinierten Namenskonventionen für die Element-ID, Links usw. jsfiddle und den Code, den Sie kopieren und in eine einzelne statische HTML-Seite einfügen können:
quelle
Hier ist ein sehr gutes Tutorial zum Erstellen eines benutzerdefinierten Kontextmenüs mit einem vollständig funktionierenden Codebeispiel (ohne JQuery und andere Bibliotheken).
Sie können ihren Demo-Code auch auf GitHub finden .
Sie enthalten eine detaillierte schrittweise Erklärung, die Sie befolgen können, um Ihr eigenes Kontextmenü mit Rechtsklick (einschließlich HTML-, CSS- und Javascript-Code) zu erstellen und am Ende mit dem vollständigen Beispielcode zusammenzufassen.
Sie können einfach mitmachen und es an Ihre eigenen Bedürfnisse anpassen. JQuery oder andere Bibliotheken sind nicht erforderlich.
So sieht ihr Beispielmenücode aus:
Ein Arbeitsbeispiel (Aufgabenliste) finden Sie im Codepen .
quelle
Sie können es mit diesem Code tun. Besuchen Sie hier das vollständige Tutorial mit automatischer Kantenerkennung. http://www.voidtricks.com/custom-right-click-context-menu/
`
quelle
quelle
oncontextmenu
Ereignis gibt, das ausgelöst wird (normalerweise mit der rechtenEine einfache Möglichkeit besteht darin, mit onContextMenu eine JavaScript-Funktion zurückzugeben:
Durch Eingabe geben
return false;
Sie das Kontextmenü auf.Wenn Sie das Kontextmenü weiterhin anzeigen möchten, können Sie einfach die
return false;
Zeile entfernen .quelle
Getestet und funktioniert in Opera 12.17, Firefox 30, Internet Explorer 9 und Chrome 26.0.1410.64
quelle
Was ich hier oben mache
Benutzer js, um Ihre eigenen Aktionen aufzurufen.
quelle
Sie sollten sich daran erinnern, dass Sie, wenn Sie nur die Firefox-Lösung verwenden möchten, diese
contextmenu="mymenu"
dem<html>
Tag und nicht dembody
Tag hinzufügen möchten, wenn Sie sie dem gesamten Dokument hinzufügen möchten .Sie sollten darauf achten.
quelle
Sie können diesen Code optimieren und modifizieren, um ein besser aussehendes und effizienteres Kontextmenü zu erhalten. Was das Ändern eines vorhandenen Kontextmenüs angeht, bin ich mir nicht sicher, wie ich das machen soll ... Schauen Sie sich diese Geige für eine organisierte Sichtweise an. Versuchen Sie auch, auf die Elemente in meinem Kontextmenü zu klicken. Sie sollten Sie ein paar tolle Nachrichten alarmieren. Wenn sie nicht funktionieren, versuchen Sie etwas Komplexeres.
quelle
Ich benutze etwas ähnliches wie die folgende jsfiddle
Wenn Sie auf ältere IE-Browser abzielen, sollten Sie diese trotzdem mit dem 'attachEvent' vervollständigen. Fall
quelle