• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • contextmenu

    版本:HTML废弃

    contextmenu全局属性是指用于某个元素的“上下文菜单”的<menu>的ID属性。上下文菜单是指在用户交互(例如右键点击)时出现的菜单。 HTML5允许我们自定义此菜单。这里有一些实现示例,包括嵌套菜单。

    contextmenu属性已经过时,将从所有浏览器中删除。

    浏览器支持

    目前只有IE、safari不支持contextmenu属性

    contextmenu全局属性是指用于某个元素的“上下文菜单”的<menu>的ID属性。上下文菜单是指在用户交互(例如右键点击)时出现的菜单。HTML5允许我们自定义此菜单。这里有一些实现示例,包括嵌套菜单。

    示例

    //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>
          anywhere in the example you can share the page on twitter and
          facebook using the share menu from your context menu.
        </li>
        <li contextmenu="changefont" id="fontsizing">
          on this specific list element, you can change the size of the text
          by using the "increase/decrease font" actions from your context menu
        </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">
          on the image below, you can fire the "change image" action
          in your context menu.<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>
        </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";
    }
    

    说明

    SpecificationStatusComment
    HTML Living Standard
    contextmenu
    Living StandardNo change from latest snapshot,HTML 5.1
    HTML 5.1
    contextmenu
    RecommendationSnapshot ofHTML Living Standard, initial definition.
    <div>元素的上下文菜单。当用户右击元素时将显示上下文菜单:<div contextmenu="mymenu">
    	<menu type="context" id="mymenu">
    		 <menuitem label="refresh"></menuitem>
    		 <menuitemlabel="twitter"></menuitem>
    	</menu>
    </div>
    

    定义和用法

    contextmenu 属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。/p>

    contextmenu 属性的值是需要打开的<menu>元素的 id。

    HTML 4.01 与 HTML5之间的差异

    contextmenu 属性是 HTML5 中的新属性。

    语法

    <element contextmenu="menu_id">

    属性值

    描述
    menu_id要打开的<menu>元素的 id。

    上篇:<xmp>