模拟windows平台的上下文菜单

技术上没什么难的，就是定义一个隐藏的box，当触发上下文事件时显示它，当单击body任意处时又隐藏它。样式效果比较粗糙，请见谅~~~

Demo在这里

结构：

<div id="wrap">
    <ul id="menu">
        <li><a href="">撤销</a></li>
        <li><a href="">重做</a></li>
        <li><a href="">复制</a></li>
        <li><a href="">粘贴</a></li>
        <li><a href="">大小写转换</a></li>
        <li><a href="">回车</a></li>
        <li><a href="">拼写检查</a></li>
        <li><a href="">新建</a></li>
        <li><a href="">自定义</a></li>
        <li><a href="">图形选项</a></li>
        <li class="no"><a href="">关闭</a></li>
    </ul>
 </div>

code是这样：

function $(id) {
	return document.getElementById(id);
};

var EventUnit = {
	addHandler: function(element, type, handler) {//添加事件处理程序
		if(element.addEventListener) {
			element.addEventListener(type, handler, false);
		} else if(element.attachEvent) {
			element.attachEvent('on' + type, handler);
		} else {
			element['on' + type] = handler;
		};
	},
	getEvent: function(event) {
		return event ? event : window.event;
	},
	preventDefault: function(event) {//取消事件默认动作
		if(event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		};
	}
}

EventUnit.addHandler(window, 'load', function() {
	var wrap = $('wrap');
	var menu = $('menu');
	var menuStyle = menu.style.display;
	var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight;
	var w = 0, h = 0;
	var left = 0, top = 0;

	EventUnit.addHandler(wrap, 'contextmenu', function(event) {
		event = EventUnit.getEvent(event);
		EventUnit.preventDefault(event);

		menu.style.display = 'block';
		w = menu.clientWidth;
		h = menu.clientHeight;
		left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w;
		top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h;
		menu.style.left = left + 'px';
		menu.style.top =  top + 'px';
	});

	EventUnit.addHandler(document, 'click', function() {
		menu.style.display = menuStyle;
	});
});