Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

contextmenu

El atributo global  contextmenu es el  id de un  <menu> para nosotros como el menu contextual para este elemento .

Un menu contextual  es un menu que aparece sobre la interacción del usuario , como por ejemplo un click derecho . HTML5 ahora permite modificar este menú . Aquí hay unos ejemplos de implementación , incluyendo menús anidados .

Ejemplo

 

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurra! Estos aprendiendo sobre ContextMenuI en MDN a través de Mozilla ');"></menuitem>
      <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>En cualquier parte del ejemplo puedes compartir la página en twitter y Facebook usando el menú de compartir de tu menú contextual.</li>
    <li><pre contextmenu="changeFont" id="fontSizing">En este elemento específico de la lista , puedes cambiar el tamaño del texto usando  las acciones "Incremenrar/Decrementar" de tu menú contextual ./pre></li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">En la imagen de abajo , puedes accionar la accion "Cambio de Imagen " en tu menú contextual .</li><br />
    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
    <menu type="context" id="ChangeImage">
      <menuitem label="Change Image" onclick="changeImage()"></menuitem>
    </menu>
  </ol>
</body>

en conjunto con este Javascript

function incFont(){
  document.getElementById("fontSizing").style.fontSize="larger";
}
function decFont(){
  document.getElementById("fontSizing").style.fontSize="smaller";
}
function changeImage(){
  var j = Math.ceil((Math.random()*39)+1);
  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}

resulta en :

Especificaciones

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'contextmenu' in that specification.
Living Standard Sin cambio desde el último snapshot, HTML5.1
HTML5.1
The definition of 'contextmenu' in that specification.
Working Draft Snapshot de WHATWG HTML Living Standard, definición inicial.

Compatibilidad en exploradores

Caracterísitica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico Not supported 9 (9) Not supported Not supported Not supported
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico Not supported Not supported 20 (20) Not supported Not supported

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: jcr4
 Última actualización por: jcr4,