Problem behoben, bei dem das Kontextmenü nicht geöffnet wurde. Benutzerdefiniertes Kontextmenü mit JavaScript-Kontextmenü funktioniert im Browser nicht
Das Kontextmenü ist das Menü, das erscheint, wenn Sie mit der rechten Maustaste auf den Bildschirm klicken. In der Regel werden solche Menüs verwendet, um die Ausführung bevorzugter Aktionen zu erleichtern, z. B. das Sortieren von Ordnern und Dateien, das Öffnen eines neuen Anwendungsfensters oder den Zugriff auf Systemeinstellungen.
Der Begriff „Kontextmenü“ bezieht sich seit vielen Jahren vor allem auf native Anwendungen. Jetzt haben wir jedoch die Möglichkeit, diese Vorteile auch in Webanwendungen zu nutzen. Ein Beispiel ist der Dateimanager in Gmil. Dieses Menü wird mit implementiert Javascript-Code:
In Zukunft werden wir in der Lage sein, 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 vorgestellt: Menü und Menüelement, mit denen Sie Kontextmenüs erstellen können. Damit der Browser das Menüelement als „Kontextmenü“ behandelt, müssen wir den Menütyp auf „Kontext“ setzen und ihm außerdem eine eindeutige ID geben.
Unten sehen Sie ein Beispiel, in dem wir ein Kontextmenü mit diesen Eigenschaften erstellen.
Wir haben auch die Möglichkeit, Untermenüs hinzuzufügen, indem wir das Menüelement wie folgt verzweigen:
Damit das Kontextmenü beim Klicken mit der rechten Maustaste auf dem Bildschirm erscheint, verwenden wir nun 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ü ausschließlich innerhalb dieses Elements verwendet.
Nun erscheint im Menü ein neues Kontextmenü Betriebssystem, wie im Beispiel unten zu sehen ist.
Hinzufügen eines Symbols
Wir sind sicher, dass viele von Ihnen Kontextmenüs gesehen haben, die Symbole verwenden. In manchen Fällen kann ein Symbol eine großartige visuelle Hilfe sein, um Benutzern das Auffinden des Menüs zu erleichtern. Darüber hinaus können Benutzer verstehen, wozu das Menü dient.
Wir können unserem HTML5-Kontextmenü auch ein Symbol hinzufügen, indem wir das Symbolattribut verwenden:
Folgendes sehen wir im Browserfenster.
Damit das Menü funktioniert
Zu diesem Zeitpunkt funktioniert unser neues Kontextmenü nicht beim Klicken. Mit ein wenig Javascript-Code können wir es jedoch ganz einfach zum Leben erwecken. In unserem Beispiel heißt das Menü E-Mail-Auswahl. Über dieses 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 hervorgehobenen Code zu verwenden.
Funktion getSelectedText() (
var text = "";
if(window.getSelection) (
text = window.getSelection().toString();
) else if (document.selection && document.selection.type != "Control") (
text = document.selection.createRange().text;
}
Rückgabetext;
};
Anschließend erstellen wir eine weitere Funktion, sagen wir sendEmail() , die den E-Mail-Client öffnet. Der Betreff des Briefes ist der eingegebene Text aus der Kopfzeile des Dokuments und der Textkörper des Briefes wird mit dem ausgewählten Text gefüllt.
Funktion sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Abschließend fügen wir diese Funktionalität über das onclick-Attribut zu unserem Menü hinzu.
Wir haben Ihnen zuvor erklärt, wie Sie HTML5 EditableContent verwenden, mit dem wir Webinhalte direkt auf der Seite bearbeiten können. Wir können benutzen diese Funktion, und fügen Sie es unserem Menü mit dem Namen „Inhalt bearbeiten“ hinzu.
Abschließend
Wir persönlich waren damit sehr zufrieden neue Funktion. Wir sehen darin viele Möglichkeiten. Leider zum Zeitpunkt des Schreibens dieses Material, nur Firefox unterstützte diese Eigenschaft. Wir hoffen, dass sich bald auch andere Browser damit verbinden.
Unten können Sie sich eine Demo ansehen (funktioniert nur in Firefox).
Die Leistung aller Geräte. Bei Ausfällen oder Ausfällen ist es nicht immer notwendig, Spezialisten anzurufen, deren Leistungen teilweise recht hoch bezahlt werden. Viele Mängel und Fehler können selbst behoben werden. Zu diesen Fehlern zählt auch, wenn die rechte Maustaste das Kontextmenü nicht öffnet. Wie verhält man sich in solchen Fällen?
Zunächst sollten Sie herausfinden, warum der Vorgang fehlschlägt und warum das Kontextmenü nicht funktioniert. Windows-Menü 10. Dafür gibt es mehrere mögliche Gründe:
- Unordnung in der Registrierung mit veralteten Dateien;
- Mangel an im Kontextmenü enthaltenen Programmen, deren instabiler Betrieb.
Überlegen wir, was in diesen Fällen zu tun ist und wie sich die Situation ändern lässt, wenn das Kontextmenü mit der rechten Maustaste nicht geöffnet wird.
Wenn das Kontextmenü mit der rechten Maustaste nicht angezeigt wird, weil die Registrierung mit veralteten Dateien überfüllt ist, empfehlen wir die Verwendung eines Dienstprogramms zum Bereinigen, beispielsweise Glary Utilities. Glary Utilities ist eine Reihe von Systemoptimierungen, Dienstprogrammen zum Schutz, Feinabstimmung, PC-Leistung verbessern. Mit dem Set können Sie unnötige Dateien, die das System verstopfen, und längst veraltete Registrierungseinträge entfernen, den Arbeitsspeicher optimieren, den Start verwalten, den Speicher optimieren und andere Funktionen nutzen, die für die gute Funktion des Computers nützlich sind. Glary Utilities können kostenlos heruntergeladen werden.
Reinigen Sie Ihr Gerät nach dem Festlegen der Einstellungen Junk-Dateien Bereinigen Sie mit demselben Dienstprogramm die Registrierung und erhöhen Sie so die Geschwindigkeit des Computers.
Fehlerbehebung einfrieren
Wenn beim Klicken mit RMB auf eine Datei oder einen Ordner das Kontextmenü auf dem Desktop nicht funktioniert, der Computer einfriert oder die Taste nicht auf Befehle reagiert, können Sie dieses Einfrieren auf zwei Arten beheben. Wir empfehlen, beides nacheinander durchzuführen . Bevor Sie mit einer davon fortfahren, müssen Sie über Administratorrechte verfügen. Sie müssen mit der Registrierung arbeiten, hier müssen Sie vorsichtig sein, bei falscher Vorgehensweise kann es zu einem Systemausfall kommen. Wenn Sie mit der Behebung von Fehlern beginnen, stellen Sie daher sicher, dass Sie einen Systemwiederherstellungspunkt erstellen, bevor Sie etwas löschen.
Ein „stilles“ Einfrieren wird normalerweise durch ein instabiles Programm, ein eingefrorenes Programm oder wenn ein Link im Kontextmenü auf eine nicht vorhandene Ressource verweist, verursacht.
Methode eins
Befolgen Sie die Schritte nacheinander:
- Überprüfen Sie die angezeigte Liste auf die Programme, die Sie bereits deinstalliert haben.
- 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 sieht wie folgt aus, wenn das Windows 10-Kontextmenü nicht geöffnet wird.
- Öffnen Sie den Registrierungseditor wie in den Schritten 1–2 der vorherigen Methode beschrieben.
- Unterschlüssel HKEY_CLASSES_ROOT öffnen,
- Darin sehen Sie mehrere Unterabschnitte mit Namen wie „name_programm.exe“, „name_programm.dll“. Überprüfen Sie die einzelnen Elemente nacheinander, indem Sie mit der linken Maustaste klicken, bis zum Unterabschnitt „Befehl“. Alle Unterabschnitte müssen geöffnet sein. Wenn es nicht geöffnet wird, sehen Sie im rechten Teil des Fensters, ob der Parameter „NoOpenWith“ vorhanden ist. Es gibt keinen solchen Parameter – erstellen Sie ihn. Befolgen Sie dazu die Schritte:
- Nachdem Sie den Unterabschnitt „Befehl“ gefunden haben, klicken Sie auf die linke Maustaste und prüfen Sie, ob auf der rechten Seite der Parameter „(Standard)“ vorhanden ist. Der Parameter muss einer Anwendung oder einer Netzwerkressource zugewiesen werden, die auf dem Computer vorhanden ist.
- Bezieht sich der Parameter auf eine nicht mehr vorhandene Ressource, sollte der gesamte Abschnitt, der mit dem Namen dieser Ressource, dem Programm, beginnt, gelöscht werden. Vergessen Sie nicht, vor dem Löschen zur Wiederherstellung ggf. eine Sicherungskopie zu erstellen. Löschen Sie, indem Sie mit RMB 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 friert nicht mehr ein, wenn RMB auf die Datei klickt.
Es ist nicht schwierig, das Kontextmenü zum Laufen zu bringen. Denken Sie jedoch daran, dass jeder Versuch, die Registrierung zu ändern, zu einem instabilen PC-Betrieb führen kann. Vergessen Sie daher nicht, Wiederherstellungspunkte und Archivkopien der zu entfernenden Programme zu erstellen. Wenn die rechte Maustaste das Kontextmenü nicht öffnet, befolgen Sie die obigen Anweisungen nacheinander und wenden Sie alle Methoden an. Der Fehler wird behoben.
Aufgabe: Klicken Sie mit der rechten Maustaste in das Browserfenster und zeigen Sie Ihr eigenes Kontextmenü an.
Was passiert, wenn Sie mit der rechten Maustaste in ein Browserfenster klicken? Es erscheint ein Kontextmenü, Aussehen Der Funktionsumfang hängt von der Art des Browsers und der Stelle ab, auf die Sie geklickt haben.
Aber was wäre, wenn wir das Browser-Kontextmenü blockieren und unser eigenes anzeigen wollten? Vielleicht? Ja. Leider nicht browserübergreifend, aber der folgende Code funktioniert in Gecko, Safari und IE. Opera bietet solche Funktionen standardmäßig nicht an.
Zeichnen wir zunächst drei DIVs, in zwei davon zeigen wir unser eigenes Kontextmenü und im dritten belassen wir das Standardbrowser-Menü.
Wie Sie sehen können, wird der Klick mit der rechten Maustaste mithilfe des Ereignisses abgefangen oncontextmenu. Um den Menüfunktionscode zu schreiben, sind folgende Komponenten erforderlich:
– Funktion zum Hinzufügen von Event-Handlern. Wird verwendet, um das eigene Kontextmenü auszublenden, wenn in andere Teile des Dokuments geklickt wird.
– Eine Funktion zur Bestimmung der Koordinaten des Mauszeigers. Wird verwendet, um die Position zu bestimmen, an der das Kontextmenü angezeigt wird.
Sie können das Popup eines Standardbrowsermenüs blockieren, indem Sie einfach false zurückgeben.
Jetzt Code:
// Funktion zur Bestimmung der Koordinaten des Mauszeigers
Funktion defPosition(event) (
var x = y = 0 ;
if (document.attachEvent != null ) ( // Internet Explorer& Oper
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
}
return (x:x, y:y) ;
}
Funktionsmenü(Typ, evt) (
// Blockiere das Popup des Kontextmenü-Ereignisses
evt = evt || window.event ;
evt.cancelBubble = true ;
// Benutzerdefiniertes Kontextmenü anzeigen
var menu = document.getElementById("contextMenuId" ) ;
varhtml = "" ;
Schalter (Typ) (
Fall 1) :
html= „Menü für den ersten DIV“;
html += "
Erste Funktion“;
html += "
Zweite Funktion“;
html += "
Dritte Funktion“;
brechen ;
Fall(2):
html= „Menü für den zweiten DIV“;
html +="
(leer)"
;
brechen ;
Standard :
// Nichts
brechen ;
}
// Wenn es etwas zu zeigen gibt – zeigen
if(html)(
menu.innerHTML = html;
menu.style .top = defPosition(evt) .y + "px" ;
menu.style .left = defPosition(evt) .x + "px" ;
menu.style .display = "" ;
}
// Popup des Standardbrowsermenüs blockieren
falsch zurückgeben ;
}
// Den Kontext schließen, wenn Sie auf die linke oder rechte Schaltfläche im Dokument klicken
// Funktion zum Hinzufügen von Event-Handlern
Funktion addHandler(object, event, handler, useCapture) (
if (object.addEventListener ) (
object.addEventListener (event, handler, useCapture ? useCapture: false ) ;
) else if (object.attachEvent ) (
object.attachEvent("on" + event, handler) ;
) sonst Warnung ( „Hinzufügen eines Handlers wird nicht unterstützt“)
;
}
addHandler(document, "contextmenu" , function () (
}
)
;
addHandler(document, "click" , function () (
document.getElementById ("contextMenuId" ) .style .display = "none" ;
}
)
;
In diesem Tutorial werfen wir einen Blick auf eine selten erwähnte HTML5-Funktion, das Kontextmenü. Vielleicht haben Sie noch nie von einem solchen Menü gehört, aber in manchen Situationen kann es äußerst nützlich sein.
Wofür kann das contextmenu-Attribut verwendet werden? Es ermöglicht Ihnen, mit nur wenigen HTML-Zeilen verschiedene Optionen zum Kontextmenü des Browsers mit der rechten Maustaste hinzuzufügen, selbst wenn Javascript deaktiviert ist. Obwohl derzeit dies 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 contextmenu-Attribut hinzufügen:
Dann erstellen wir das Menü:
Das id-Attribut muss mit dem contextmenu-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. Zuerst fügen wir einen Menüpunkt mit Text und einem Symbol ein, dann fügen wir einen Link hinzu, um die aktuelle Seite auf Facebook zu übertragen, und schließlich fügen wir einen Link ein, um die Seite zu aktualisieren. Es stellt sich ein Kontextmenü mit drei Elementen heraus:
Sie können auch Untermenüs erstellen:
sehr interessant und nützliche Eigenschaft HTML5. Die Anwendung ist jedoch nur auf den Firefox-Browser beschränkt.
Webanwendungen stellen heute einen neuen Schritt in der Entwicklung des Webs dar. Dies sind alles andere als gewöhnliche Informationsseiten. Gmail und Dropbox sind Beispiele für fortgeschrittene Webanwendungen. Mit zunehmender Funktionalität, Zugänglichkeit und Nützlichkeit von Webanwendungen steigt auch die Notwendigkeit, die Effizienz ihrer Nutzung zu steigern. In diesem Leitfaden geht es darum, so etwas Nützliches wie Ihr eigenes Kontextmenü zu erstellen, und insbesondere:
- Lassen Sie uns herausfinden, was ein Kontextmenü ist und warum es benötigt wird.
- Wir implementieren unser Kontextmenü mit JS und CSS.
- Lassen Sie uns auf die Mängel und Grenzen des verwendeten Ansatzes eingehen, um zu erfahren, vor welchen Problemen wir bei der Einführung all dessen in der Produktion warnen können.
Was ist ein Kontextmenü?
Laut Wikipedia ist das Kontextmenü ein Menü, das erscheint, wenn der Benutzer mit interagiert GUI(durch Drücken der rechten Maustaste). Das Kontextmenü enthält einen begrenzten Satz 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ü angezeigt Betriebssystem. Von hier aus können Sie wahrscheinlich einen neuen Ordner erstellen, Informationen abrufen und etwas anderes tun. Über das Kontextmenü im Browser können Sie beispielsweise Informationen über die Seite abrufen, den Quellcode 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 davon ab, wo genau Sie geklickt haben, also vom Kontext. Dies ist das von Browserentwicklern festgelegte Standardverhalten [ Und Erweiterungen dazu].
Webanwendungen beginnen langsam, Standardkontextmenüs durch eigene zu ersetzen. Gmail und Dropbox sind großartige Beispiele. Die Frage ist nur, wie erstelle ich ein eigenes Kontextmenü? Im Browser löst ein Rechtsklick das Kontextmenü-Ereignis aus. Wir müssen das Standardverhalten überschreiben und es so gestalten, dass statt Standardmenü unser eigenes kam heraus. Das ist nicht so schwierig, aber wir werden es Schritt für Schritt verstehen, sodass es recht umfangreich herauskommt. Damit das zu entwickelnde Beispiel nicht völlig realitätsfern wird, erstellen wir zunächst die Grundstruktur der Anwendung.
Aufgabenliste
Stellen wir uns vor, wir erstellen eine Anwendung, mit der wir eine Liste von Aufgaben verwalten können. Ich verstehe, dass Sie von all diesen Aufgabenlisten wahrscheinlich schon unglaublich müde sind, aber sei es so. Die Bewerbungsseite enthält eine Liste der ausstehenden Aufgaben. Für jede Aufgabe steht ein typischer Satz von CRUD-Aktionen zur Verfügung: Informationen zur Aufgabe abrufen, eine neue hinzufügen, bearbeiten, löschen.Vom Übersetzer
Die Übersetzung ist stellenweise völlig kostenlos, jedoch nicht zu Lasten der Bedeutung oder des Inhalts. Alles, was nicht direkt mit dem Original in Zusammenhang steht, ist in den Notizen enthalten.
Mit Anregungen, Wünschen und Kommentaren, wie gewohnt im LAN.
