Kontextmenü

Springen zu:
  1. Beispiel
  2. Spezifikationen
  3. Browser Kompatibilität
  4. Siehe auch

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.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: ctexxx
Zuletzt aktualisiert von: ctexxx,