背景介绍菜单应用是 Web 页面的点睛之笔。当用户在浏览器端右键单击的时候，浏览器会弹出自带的菜单，显示如“查看源代码”、“复制”、“粘贴”等可用菜单栏。通过使用浏览器自带的菜单，用户可以方便的进行复制、粘贴等操作。然而很多时候，网站开发人员会考虑禁止用户通过浏览器自带的菜单进行以上操作，或者是希望用户使用开发人员自定义菜单。一个简单的自定义菜单如下图所示：
图 1. 自定义菜单 自定义菜单的使用，可以方便用户快速定位到某个操作，增强了用户界面的交互性，提高用户体验。
Dojo 提供的菜单库，除实现了菜单的基本功能外，还加入对弹出式菜单、图标效果、键盘响应等功能的支持，方便了开发人员的菜单开发过程。本文将首先介绍 Dojo 菜单实现原理，并从创建最简单右键菜单入手，介绍右键菜单的静态和动态两种菜单创建方式，最后举例说明如何开发 Dojo 提供的上下文菜单、下拉式菜单、静态菜单三种菜单。
右键菜单实现原理在默认状况下，用户在浏览器右键单击时，浏览器会触发 document.oncontextmemu 事件，浏览器会采用默认方式对事件进行处理，弹出浏览器自带的右键菜单。
实现自定义右键菜单的基本原理就是：菜单默认为隐藏；当 document.oncontextmemu 事件触发时，使用 JavaScript 操作菜单节点的 style 属性，显示该菜单；同时使用 JavaScript 侦听鼠标 onclick 事件，当该事件执行时，判断鼠标点击位置是否在菜单区域时，若没有，则通过操作菜单的 style 隐藏该菜单。
Dojo 实现右键菜单的方法也是采用了上面的原理，但 Dojo 封装了底层事件的处理方法，开发人员直接使用 Dojo 提供的简单 API 就能实现复杂的菜单。具体实现方式参见下文。 |
