脚本宝典收集整理的这篇文章主要介绍了html5教程-Html5开发学习(4)：contextmenu――右键菜单，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

上一篇：/kf/201203/124948.html 

1，contextmenu
在Html5中，每个元素新增了一个属性：contextmenu
contextmenu 是上下文菜单，即鼠标右击元素会出现一个菜单。
 
2，<menu>
要实现鼠标右击元素会出现一个菜单，还必须了解html5里新增的另一个元素:<menu>
顾名思义<menu>是定义菜单的，
<menu> 元素属性：
    type ：菜单类型属。
        有三个值
        1）context：上下文；
        2）toolbar：工具栏；
        3）list：列表
    label ：菜单显示的名称。

3，<menuitem>
<menu> </menu>内部可以嵌入一个一个菜单项，即<menuitem></menuitem>。
menuitem 属性：
    label：菜单项显示的名称
    icon：在菜单项左侧显示的图标
    onclick：点击菜单项触发的事件

4，下面的代码演示了如何实现一个鼠标右击菜单：
<p style='display:inline' contextmenu="mymenu">右击我试试</p>

<menu type="context" id="mymenu">
  <menuitem label="菜单1" onclick="alert('这是菜单1');" icon="http://d.lanrentuku.com/down/gif/gif-0145.gif"></menuitem>
  <menuitem label="菜单2" onclick="alert('这是菜单2');" icon="http://d.lanrentuku.com/down/gif/gif-0161.gif"></menuitem>
  <menu label="菜单3">
    <menuitem label="菜单3-1" icon="http://up.2cto.com/2012/0407/20120407090812492.gif" onclick="alert('这是菜单3-1');">
    </menuitem>
    <menu label="菜单3-2" > 
       <menuitem label="菜单3-2-1" icon="http://up.2cto.com/2012/0407/20120407090813196.gif" onclick="alert('这是菜单3-2-1');">
       </menuitem>
    </menu>
  </menu>
</menu>

 这样，鼠标右击<p>时，就会出现菜单效果如下：

  

注：目前只有火狐浏览器支持<menu>，所以有兴趣的同学，可以在火狐浏览器下试试。
 

作者 : 徐明祥
 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-Html5开发学习(4)：contextmenu――右键菜单全部内容，希望文章能够帮你解决html5教程-Html5开发学习(4)：contextmenu――右键菜单所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。