在Web开发中，上下文菜单是一个常见的交互元素，它为用户提供了一种方便的方式来访问与当前页面或元素相关的操作。然而，创建一个能够在所有浏览器上正常工作的上下文菜单并非易事。本文将介绍如何使用JavaScript创建一个跨浏览器的上下文菜单类，该类可以在除了Opera之外的所有主流浏览器上运行，因为Opera不支持oncontextmenu事件。
大约一年半前，在IE浏览器上为一个项目创建了一个上下文菜单，用于在GridView控件上显示并执行一些操作。由于该项目基于IE，因此上下文菜单是IE特定的，并且不是跨浏览器兼容的。此外，它是由JavaScript和HTML混合实现的：使用HTML table和div元素创建了其布局，并使用JavaScript进行显示。想要开发一个跨浏览器的JavaScript类来实现上下文菜单。因此，开始开发它，并在互联网和书籍上花费了一些时间后，成功了。
上下文菜单类的构造函数接受一个对象字面量作为参数。该对象字面量参数的定义如下：
var Arguments = {
Base: _Base, // 上下文菜单显示的基础元素引用
Width: _Width, // 上下文菜单的宽度，整数
FontColor: _FontColor, // 每个上下文菜单项的字体颜色
HoverFontColor: _HoverFontColor, // 每个上下文菜单项悬停时的字体颜色
HoverBackgroundColor: _HoverBackgroundColor, // 每个上下文菜单项悬停时的背景颜色
HoverBorderColor: _HoverBorderColor, // 每个上下文菜单项悬停时的边框颜色
OnClickEventListener: _OnClickEventListener // 点击事件处理程序的引用
};
可以将对象字面量参数的每个属性分配为null。在这种情况下，每个属性将获得其默认值：
var Arguments = {
Base: null, // 默认值: document.documentElement
Width: null, // 默认值: 200
FontColor: null, // 默认值: 'black'
HoverFontColor: null, // 默认值: 'white'
HoverBackgroundColor: null, // 默认值: '#2257D5'
HoverBorderColor: null, // 默认值: 'orange'
OnClickEventListener: null // 默认匿名方法
};
上下文菜单控件具有以下公共方法：
上下文菜单控件只有一个公共属性，它只显示当前版本的上下文菜单控件。它不执行任何其他操作。
Version: 显示当前版本。
上下文菜单控件只有一个事件——Click事件，当点击非分隔符项时触发。Click事件：当项被点击时触发。响应Click事件的本地匿名方法（即事件处理程序）具有以下签名：
var EventHandlerName = function(Sender, EventArgs) {
// ...
};
其中Sender是引发click事件的元素引用（即tr元素），EventArgs是包含有关Click事件必要信息的对象字面量。EventArgs对象字面量的定义如下：
var EventArgs = {
CommandName: _CommandName, // 项的基本命令名称
Text: _Text, // 项文本
IsDisabled: _IsDisabled, // 指示项是否被禁用
ImageUrl: _ImageUrl // 项图片的路径
};
请注意，Click事件处理程序是一个C#风格的事件处理程序。
在网页中添加对ContextMenu.js文件的引用：
<script type="text/javascript" src="JS/ContextMenu.js"></script>
在网页上创建一个div元素：
<div id="div" style="width: 925px; height: 300px; background-color: silver;"></div>
现在，在网页的head部分创建一个script标签，并在window.onload事件中添加以下代码：
<script type="text/javascript">
var oCustomContextMenu = null;
var oBase = null;
window.onload = function() {
oBase = document.getElementById('div');
var Arguments = {
Base: oBase,
Width: 200,
FontColor: null,
HoverFontColor: null,
HoverBackgroundColor: null,
HoverBorderColor: null,
ClickEventListener: OnClick
};
oCustomContextMenu = new CustomContextMenu(Arguments);
oCustomContextMenu.AddItem('Images/ei0019-48.gif', 'Add', false, 'Add');
oCustomContextMenu.AddItem('Images/save.png', 'Save', true, 'Save');
oCustomContextMenu.AddSeparatorItem();
oCustomContextMenu.AddItem('Images/ei0020-48.gif', 'Update', false, 'Update');
oCustomContextMenu.AddSeparatorItem();
oCustomContextMenu.AddItem(null, 'Cancel', false, 'Cancel');
}
</script>
首先，获取Base对象的引用，并创建一个带有必要属性的Arguments对象字面量。之后，使用new关键字实例化一个上下文菜单对象并添加上下文菜单项。不要忘记在Arguments对象字面量中连接Click事件：
ClickEventListener: OnClick
现在，创建一个Click事件处理程序作为本地匿名方法：
var OnClick = function(Sender, EventArgs) {
// Code ...
oCustomContextMenu.Hide();
};