Benutzerdefiniertes Kontextmenü mit JavaScript. Korrigieren, dass das Kontextmenü nicht geöffnet wird Das Kontextmenü funktioniert nicht im Browser

Die Bedienbarkeit aller Geräte. Bei Ausfällen oder Pannen ist es nicht immer notwendig, Spezialisten anzurufen, die ihre Dienste manchmal zu recht hohen Preisen bezahlen. Viele Mängel, Fehler können selbst korrigiert werden. Zu dieser Art von Abstürzen gehören Fehler, wenn die rechte Maustaste nicht das Kontextmenü öffnet. Was tun in solchen Fällen?

Zuerst sollten Sie herausfinden, warum die Fehlfunktion auftritt, warum die kontextabhängigen Windows-Menü 10. Es gibt mehrere mögliche Gründe:

  • überladene Registrierung mit veralteten Dateien;
  • Mangel an Programmen, die im Kontextmenü enthalten sind, ihre instabile Arbeit.

Lassen Sie uns überlegen, was in diesen Fällen zu tun ist, wie Sie die Situation ändern können, wenn das Kontextmenü nicht mit der rechten Maustaste geöffnet wird.

Wenn das Kontextmenü mit der rechten Maustaste aufgrund der Unordnung der Registrierung mit veralteten Dateien nicht angezeigt wird, empfehlen wir die Verwendung eines Dienstprogramms zum Bereinigen, beispielsweise Glary Utilities. Glary Utilities ist eine Suite von Systemoptimierungen, Dienstprogrammen, die zum Schutz beitragen Feinabstimmung Verbesserung der PC-Leistung. Mit Hilfe des Sets können Sie unnötige Dateien löschen, die das System verstopfen, Registrierungseinträge, die für lange Zeit veraltet sind, den Arbeitsspeicher optimieren, den Start verwalten, den Speicher optimieren und andere Funktionen, die für das gute Funktionieren des Computers nützlich sind. Glary Utilities kann kostenlos heruntergeladen werden.


Nachdem Sie die Einstellungen vorgenommen haben, löschen Sie Ihr Gerät aus unnötige Dateien Bereinigen Sie mit demselben Dienstprogramm die Registrierung und erhöhen Sie dadurch die Geschwindigkeit des Computers.

Fehlerkorrektur einfrieren

Wenn das Kontextmenü auf dem Desktop nicht funktioniert, wenn Sie mit der rechten Maustaste auf eine Datei oder einen Ordner klicken, der Computer einfriert, die Taste nicht auf Befehle reagiert, können Sie dieses Einfrieren auf zwei Arten beseitigen. Wir empfehlen, beides nacheinander zu tun. Bevor Sie mit einem von ihnen fortfahren können, müssen Sie über Administratorrechte verfügen. Sie müssen mit der Registrierung arbeiten, hier müssen Sie vorsichtig sein, wenn Sie etwas falsch machen, kann das System abstürzen. Wenn Sie mit dem Beheben von Fehlern beginnen, müssen Sie daher unbedingt einen Systemwiederherstellungspunkt erstellen, bevor Sie etwas löschen.

Ein "dummer" Hang entsteht in der Regel durch ein instabiles Programm, ein eingefrorenes Programm oder wenn ein Link im Kontextmenü auf eine nicht vorhandene Ressource verweist.

Methode eins

Befolgen Sie die Schritte nacheinander:



  1. Überprüfen Sie die angezeigte Liste auf Programme, die Sie bereits entfernt haben.
  2. Wenn sich in der Liste ein Programm befindet, das Sie entfernt haben, entfernen Sie es aus der Registrierung. Bevor Sie einen Registrierungsschlüssel löschen, empfehlen wir Ihnen, eine Sicherungskopie davon zu erstellen, um ihn für den Fall zu speichern, dass Sie ihn wiederherstellen müssen.

Methode zwei

Der Algorithmus für die zweite Methode, wenn Sie nicht über das Kontextmenü von Windows 10 verfügen, lautet wie folgt.

  1. Öffnen Sie den Registrierungseditor wie in den Schritten 1–2 der vorherigen Methode beschrieben.
  2. Öffnen Sie den Unterschlüssel HKEY_CLASSES_ROOT,
  3. Dort sehen Sie mehrere Unterabschnitte mit Namen wie "name_programm.exe", "name_programm.dll". Überprüfen Sie jedes einzeln, indem Sie auf LMB klicken, bis zum Unterabschnitt "Befehl". Alle Unterabschnitte sollten geöffnet werden. Wenn es nicht geöffnet wird, suchen Sie im rechten Teil des Fensters nach dem Parameter "NoOpenWith". Es gibt keinen solchen Parameter - erstellen Sie ihn. Führen Sie dazu die Schritte aus:

  1. Nachdem Sie den Unterabschnitt "Befehl" gefunden haben, klicken Sie auf LMB und überprüfen Sie das Vorhandensein des Parameters "(Standard)" auf der rechten Seite. Der Parameter muss für die Anwendung registriert werden, oder Netzwerkressource im Computer vorhanden.
  • Bezieht sich der Parameter auf eine bereits fehlende Ressource, sollte der gesamte Abschnitt, der mit dem Namen dieser Ressource oder dieses Programms beginnt, gelöscht werden. Vergessen Sie nicht, bei Bedarf eine Sicherungskopie zu erstellen, bevor Sie sie zur Wiederherstellung löschen. Löschen Sie, indem Sie mit der rechten Maustaste auf den Namen des Abschnitts klicken und dann auf "Löschen" - "Ja" klicken.

Nach Abschluss der beiden Methoden sollte sich das Kontextmenü öffnen. Der PC wird nicht mehr einfrieren, wenn RMB auf die Datei klickt.

Es ist nicht schwer, das Kontextmenü einzurichten. Denken Sie daran, dass jeder Versuch, die Registrierung zu ändern, zu einem instabilen Betrieb des PCs führen kann. Vergessen Sie also nicht, Wiederherstellungspunkte zu erstellen und Kopien der zu entfernenden Programme zu archivieren. Wenn die rechte Maustaste das Kontextmenü nicht öffnet, befolgen Sie die obigen Anweisungen nacheinander, wenden Sie alle Methoden an, der Fehler wird behoben.

Das Kontextmenü ist das Menü, das erscheint, wenn Sie mit der rechten Maustaste auf den Bildschirm klicken. Normalerweise werden diese Menüs verwendet, um ausgewählte Aktionen wie das Sortieren von Ordnern und Dateien, das Öffnen eines neuen Anwendungsfensters oder den Zugriff auf Systemeinstellungen zu erleichtern.

Der Begriff „Kontextmenü“ bezieht sich seit vielen Jahren vor allem auf native Anwendungen. Wir haben jedoch jetzt die Möglichkeit, sie auch in Webanwendungen zu nutzen. Ein Beispiel ist der Dateimanager in Gmil. Dieses Menü wird mit Javascript-Code implementiert:

Zukünftig werden wir die Möglichkeit haben, Kontextmenüs für HTML5-basierte Websites zu erstellen. Wir laden Sie ein, sich mit diesem Ansatz vertraut zu machen.

Entwicklung eines Kontextmenüs

HTML5 hat uns zwei neue Elemente eingeführt: menu und menuitem, und sie ermöglichen es Ihnen, Kontextmenüs zu erstellen. Damit der Browser das Menüelement als "Kontextmenü" behandelt, müssen wir den Menütyp auf Kontext setzen und ihm auch eine eindeutige ID zuweisen.

Unten ist ein Beispiel, in dem wir ein Kontextmenü mit diesen Eigenschaften erstellen.


Inhalt bearbeiten
E-Mail-Auswahl

Wir haben auch die Möglichkeit, Untermenüs hinzuzufügen, indem wir das Menüelement wie folgt verzweigen:


Inhalt bearbeiten
E-Mail-Auswahl

Facebook
Twitter


Damit das Kontextmenü beim Rechtsklick auf dem Bildschirm erscheint, verwenden wir ein neues HTML-Attribut namens contextmenu. Dieses Attribut wird verwendet, um das Menü mit der angegebenen ID zu identifizieren. In unserem obigen Beispiel können wir unser Kontextmenü mit contextmenu = context-menu-id definieren.

Wir können ein Attribut für das body-Tag festlegen, wenn wir das Kontextmenü auf der gesamten Seite verwenden möchten. Wir können es auch zum HTML-Element hinzufügen, damit dieses Menü wurde ausschließlich in diesem Element verwendet.

Ein neues Kontextmenü wird jetzt im Betriebssystemmenü angezeigt, wie im folgenden Beispiel zu sehen ist.


Hinzufügen eines Symbols

Wir sind sicher, dass viele von Ihnen Kontextmenüs gesehen haben, die Symbole verwenden. In einigen Fällen kann ein Symbol eine großartige visuelle Hilfe sein, um Benutzern beim Auffinden von Menüs zu helfen. Darüber hinaus gibt es den Benutzern auch die Möglichkeit zu verstehen, wofür das Menü gedacht ist.


Wir können unserem HTML5-Kontextmenü auch ein Symbol hinzufügen, indem wir das icon-Attribut verwenden:


Inhalt bearbeiten
E-Mail-Auswahl

Facebook
Twitter


Dies sehen wir im Browserfenster.


Damit das Menü funktioniert

Auf diese Phase unser neues Kontextmenü funktioniert nicht, wenn es angeklickt wird. Wir können ihn jedoch sehr leicht mit einem kleinen Javascript-Code zur Besinnung bringen. In unserem Beispiel heißt das Menü E-Mail-Auswahl. In diesem Menü können Benutzer ausgewählten Text per E-Mail senden.

Damit es funktioniert, fügen wir eine Funktion hinzu, die es Benutzern ermöglicht, den Code-Behind zu verwenden.

Funktion getSelectedText() (
vartext = "";
if (window.getSelection) (
text = window.getSelection().toString();
) else if (document.selection && document.selection.type! = "Control") (
text = document.selection.createRange().text;
}
Rückgabetext;
};
Dann erstellen wir eine weitere Funktion, angenommen sendEmail(), die einen E-Mail-Client öffnet. Die Betreffzeile der E-Mail ist der eingegebene Text aus dem Dokumentkopf und der Text der E-Mail wird mit dem markierten Text gefüllt.

Funktion sendEmail() (
var bodyText = getSelectedText ();
window.location.href = "mailto:? subject =" + document.title + "& body =" + bodyText + "";
};
Schließlich fügen wir diese Funktionalität über das onclick-Attribut zu unserem Menü hinzu.

E-Mail-Auswahl
Wir haben Ihnen zuvor gezeigt, wie Sie HTML5 EditableContent verwenden, mit dem wir Webinhalte direkt auf der Seite bearbeiten können. Wir können diese Funktion nutzen, indem wir sie unserem Menü „Inhalt bearbeiten“ hinzufügen.

Abschließend

Darüber haben wir uns persönlich sehr gefreut neue Funktion... Wir sehen darin viele Möglichkeiten. Leider unterstützt zum Zeitpunkt dieses Schreibens nur Firefox diese Funktion. Hoffentlich werden sich bald andere Browser damit verbinden.

Unten sehen Sie eine Demo (funktioniert nur in Firefox).

Ziel: Mit der rechten Maustaste im Browserfenster klicken und ein eigenes Kontextmenü anzeigen.

Was passiert, wenn Sie mit der rechten Maustaste in ein Browserfenster klicken? Es erscheint ein Kontextmenü, Aussehen und deren Funktionsumfang von der Art des Browsers und der Stelle, auf die Sie geklickt haben, abhängt.
Was wäre, wenn wir das Browser-Kontextmenü blockieren und unser eigenes anzeigen wollten? Womöglich? Jawohl. Leider nicht browserübergreifend, aber der folgende Code funktioniert in Gecko, Safari und IE. Opera bietet diese Funktionen nicht standardmäßig.

Lassen Sie uns zunächst drei DIVs zeichnen, von denen wir in 2 unser eigenes Kontextmenü anzeigen und im dritten das Standardbrowser-Menü belassen.

"Höhe: 100px; Rahmen: 1px durchgehend rot; Hintergrundfarbe: #FFCCCC;"> Rechtsklick

"Höhe: 100px; Rahmen: 1px durchgehend blau; Hintergrundfarbe: #CCCCFF;"> Rechtsklick

"Höhe: 100px; Rahmen: 1px durchgehend grün; Hintergrundfarbe: #CCFFCC;"> Rechtsklick


"position: absolut; top: 0; left: 0; border: 1px solid # 666; background-color: #CCC; display: none; float: left;">


Wie Sie sehen können, erfolgt das Erfassen des Rechtsklicks mithilfe des Ereignisses oncontextmenu... Um den Code für die Menüfunktion zu schreiben, benötigen Sie folgende Komponenten:
- Funktion zum Hinzufügen von Ereignishandlern. Wird verwendet, um das eigene Kontextmenü auszublenden, wenn Sie in andere Teile des Dokuments klicken.
- Funktion zum Ermitteln der Koordinaten des Mauszeigers. Wird verwendet, um die Position zu definieren, in der das Kontextmenü angezeigt wird.
Sie können das Popup des Standardbrowsermenüs blockieren, indem Sie einfach false zurückgeben.

Nun der Code:

// Funktion zum Ermitteln der Koordinaten des Mauszeigers
Funktion defPosition (Ereignis) (
var x = y = 0;
if (document.attachEvent! = null) (// Internet Explorer & Opera
x = window.event .clientX + (document.documentElement .scrollLeft? document.documentElement .scrollLeft: document.body .scrollLeft);
y = window.event .clientY + (document.documentElement .scrollTop? document.documentElement .scrollTop: document.body .scrollTop);
) else if (! document.attachEvent && document.addEventListener) (// Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
) anders (
// Nichts tun
}
zurück (x: x, y: y);
}

Funktionsmenü (Typ, Ereignis) (
// Blockieren Sie das Sprudeln des Kontextmenüereignisses
evt = evt || Fenster.Ereignis;
evt.cancelBubble = true;
// Unser eigenes Kontextmenü anzeigen
var menu = document.getElementById ("contextMenuId");
var html = "";
Schalter (Typ) (
Fall 1):
html = "Menü für die erste DIV";
html + = "
Erste Funktion "
;
html + = "
Zweite Funktion "
;
html + = "
Dritte Funktion "
;
brechen;
Fall (2):
html = "Menü für die zweite DIV";
html + = "
(leer)" ;
brechen;
Ursprünglich:
// Nichts
brechen;
}
// Wenn es etwas zu zeigen gibt, zeig es
wenn (html) (
menu.innerHTML = html;
menu.style .top = defPosition (evt) .y + "px";
menu.style .left = defPosition (evt) .x + "px";
menu.style .display = "";
}
// Blockieren Sie das Popup des Standardbrowsermenüs
falsch zurückgeben;
}

// Schließen Sie den Kontext, wenn Sie mit der linken oder rechten Maustaste auf das Dokument klicken
// Funktion zum Hinzufügen von Eventhandlern
Funktion addHandler (Objekt, Ereignis, Handler, useCapture) (
if (object.addEventListener) (
object.addEventListener (Ereignis, Handler, useCapture? useCapture: false);
) else if (object.attachEvent) (
object.attachEvent ("on" + Ereignis, Handler);
) sonst Alarm ( "Handler hinzufügen wird nicht unterstützt") ;
}
addHandler (Dokument, "Kontextmenü", Funktion () (

} ) ;
addHandler (Dokument, "Klick", Funktion () (
document.getElementById ("contextMenuId") .style .display = "none";
} ) ;

Webanwendungen werden heute zu einem neuen Schritt in der Entwicklung des Webs. Diese sind weit von gewöhnlichen Informationsseiten entfernt. Beispiele für erweiterte Webanwendungen sind Gmail und Dropbox. Mit zunehmender Funktionalität, Zugänglichkeit und Nützlichkeit von Webanwendungen wächst auch die Notwendigkeit, die Effizienz ihrer Nutzung zu erhöhen. Dieses Tutorial behandelt das Erstellen eines so nützlichen Dings wie Ihres eigenen Kontextmenüs und insbesondere:

  1. Lassen Sie uns herausfinden, was ein Kontextmenü ist und warum Sie es brauchen.
  2. Lassen Sie uns unser Kontextmenü mit JS und CSS implementieren.
  3. Lassen Sie uns auf die Unzulänglichkeiten und Grenzen des verwendeten Ansatzes eingehen, um zu wissen, vor welchen Problemen wir bei der Einführung in die Produktion warnen können.

Was ist das Kontextmenü?

Laut Wikipedia ist das Kontextmenü das Menü, das erscheint, wenn der Benutzer mit der grafischen Oberfläche interagiert (wenn die rechte Maustaste gedrückt wird). Das Kontextmenü enthält eine begrenzte Menge möglicher Aktionen, die normalerweise mit dem ausgewählten Objekt verknüpft sind.

Wenn Sie auf Ihrem Computer mit der rechten Maustaste auf den Desktop klicken, wird ein Kontextmenü geöffnet Betriebssystem... Von hier aus können Sie wahrscheinlich erstellen neuer Ordner, holen Sie sich ein paar Informationen und tun Sie etwas anderes. Über das Kontextmenü im Browser können Sie beispielsweise Informationen über die Seite abrufen, ihre Quellen anzeigen, ein Bild speichern, einen Link in einem neuen Tab öffnen, mit der Zwischenablage arbeiten usw. Darüber hinaus hängt die Menge der verfügbaren Aktionen genau davon ab, wo Sie geklickt haben, dh vom Kontext. Dies ist das von den Browser-Entwicklern festgelegte Standardverhalten [ Und Erweiterungen dazu].

Webanwendungen beginnen langsam, Standard-Kontextmenüs durch ihre eigenen zu ersetzen. Gmail und Dropbox sind hervorragende Beispiele. Die Frage ist nur, wie Sie Ihr eigenes Kontextmenü erstellen. Im Browser löst ein Rechtsklick das Kontextmenü-Ereignis aus. Wir müssen das Standardverhalten überschreiben und es so machen, dass anstelle von Standardmenü unsere eigenen abgeleitet. Es ist nicht so schwer, aber wir werden es Schritt für Schritt verstehen, damit es ziemlich umfangreich wird. Lassen Sie uns zunächst die Grundstruktur der Anwendung erstellen, damit das entwickelte Beispiel nicht völlig an der Realität abweicht.

Aufgabenliste

Stellen Sie sich vor, wir erstellen eine Anwendung, die es uns ermöglicht, eine To-Do-Liste zu führen. Ich verstehe, dass Sie von all diesen To-Do-Listen wahrscheinlich schon unglaublich müde sind, aber lass es sein. Die Anwendungsseite enthält eine Liste unvollendeter Aufgaben. Für jede Aufgabe steht ein typischer Satz von CRUD-Aktionen zur Verfügung: Informationen über die Aufgabe abrufen, eine neue hinzufügen, bearbeiten, löschen.

Vom Übersetzer

Die Übersetzung ist stellenweise ganz frei, aber nicht zu Lasten der Bedeutung oder des Inhalts. Alles, was nicht direkt mit dem Original zu tun hat, ist in den Anmerkungen enthalten.
Mit Anregungen, Wünschen und Kommentaren wie gewohnt in der PN.

In diesem Tutorial werfen wir einen Blick auf den selten erwähnten HTML5-Trick – das Kontextmenü. Sie haben vielleicht noch nie von einem solchen Menü gehört, aber in manchen Situationen kann es sehr nützlich sein.

Wozu kann das Kontextmenü-Attribut dienen? Es ermöglicht Ihnen, mit nur wenigen Zeilen HTML-Code verschiedene Optionen zum Kontextmenü des Browsers hinzuzufügen, selbst wenn Javascript deaktiviert ist. Obwohl im Moment solche handliches Werkzeug nur in Firefox verfügbar.

So funktioniert es:

Die Verwendung des Kontextmenüs ist viel einfacher, als es auf den ersten Blick erscheinen mag. Sie müssen das Kontextmenü-Attribut hinzufügen:

Dann erstellen wir das Menü:

Das id-Attribut muss mit dem Kontextmenü-Attribut übereinstimmen. Somit ist es möglich, für verschiedene Teile der Seite unterschiedliche Kontextmenüs zu verwenden.

Dann fügen wir Menüpunkte hinzu. Fügen Sie zuerst einen Menüpunkt mit Text und einem Symbol ein, fügen Sie dann einen Link hinzu, um die aktuelle Seite auf Facebook zu übertragen, und fügen Sie schließlich einen Link zum Aktualisieren der Seite ein. Es stellt sich ein Kontextmenü mit drei Elementen heraus:

Sie können auch Untermenüs erstellen:

Sehr interessant und nützliche Eigenschaft HTML5. Die Verwendung ist jedoch nur auf den Firefox-Browser beschränkt.