Das globale Attribut contextmenu ist die id von einem <menu>, welches als Kontextmenü benutzt werden soll.
Ein Kontextmenü ist ein Menü, dass nach einer Interaktion des Benutzers erscheint. HTML5 erlaubt nun, dieses Menü anzupassen. Hier sind ein paar Beispiele, inklusive verschachtelter Menüs.
Beispiel
HTML
<body contextmenu="share">
<menu type="context" id="share">
<menu label="share">
<menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
<menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
</menu>
</menu>
<ol>
<li>
Überall in diesem Beispiel kannst du die Seite über das Kontextmenü auf Twitter und Facebook teilen.
</li>
<li contextmenu="changeFont" id="fontSizing">
In diesem besonderen Listen-Element kannst du die Schriftgröße eines
Textes über das Kontextmenü vergrößern und verkleinern.
</li>
<menu type="context" id="changeFont">
<menuitem label="Schrift vergrößern" onclick="incFont()"></menuitem>
<menuitem label="Schrift verkleinern" onclick="decFont()"></menuitem>
</menu>
<li contextmenu="ChangeImage" id="changeImage">
Auf dem unteren Bild kannst du die Option
"Wechsele Bild" im Kontextmenü auswählen.<br />
<img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
contextmenu="ChangeImage" id="promoButton" />
<menu type="context" id="ChangeImage">
<menuitem label="Wechsele Bild" onclick="changeImage()"></menuitem>
</menu>
</li>
</ol>
</body>
JavaScript
function shareViaTwitter() {
window.open("https://twitter.com/intent/tweet?text=" +
"Hurray! I am learning ContextMenu from MDN via Mozilla");
}
function shareViaFacebook() {
window.open("https://facebook.com/sharer/sharer.php?u=" +
"https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
}
function incFont() {
document.getElementById("fontSizing").style.fontSize = "larger";
}
function decFont() {
document.getElementById("fontSizing").style.fontSize = "smaller";
}
function changeImage() {
var index = Math.ceil(Math.random() * 39 + 1);
document.images[0].src =
"https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
index + ".png";
}
Ergebnis
Spezifikationen
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard Die Definition von 'contextmenu' in dieser Spezifikation. |
Lebender Standard | Keine Änderungen seit dem letzten Snapshot, HTML 5.1 |
| HTML 5.1 Die Definition von 'contextmenu' in dieser Spezifikation. |
Empfehlung | Snapshot von HTML Living Standard, initiale Definition. |
Browser Kompatibilität
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format.
Diese Kompatibilitätstabelle liegt noch im alten Format vor,
denn die darin enthaltenen Daten wurden noch nicht konvertiert.
Finde heraus wie du helfen kannst!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | Nicht unterstützt[1] | 9 (9) | Nicht unterstützt | Nicht unterstützt[1] | Nicht unterstützt |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | Nicht unterstützt | Nicht unterstützt | 20 (20) | Nicht unterstützt | Nicht unterstützt | ? |
[1] Eine experimentelle Implementation war zwischenzeitlich mit der Kommandozeilen-Option --enable-blink-features=ContextMenu verfügbar. Bis Chrome 52 und Opera 39 war diese außerdem durch Aktivieren der Option Experimental Web Platform verfügbar, welche aber aufgrund eines Kompatibilitätsproblems entfernt wurde. Dies ist dokumentiert in Chromium bug 87553.