-12-18日，即将结束的日子里。
公司做了一个项目，主要难点在于实现公司组织架构图上，何谓组织架构图，如下便是：
这里的每个节点都有相应的右键菜单，说白了就跟你用xmind的体验是一样的，用户体验自然是很好的，毕竟开发了都接近一个礼拜，而且还要加班。
做公司项目嘛，就要求快，首先就是先在网上找现成的呗，最开始找的是OrgChart,可是它对数据格式的要求十分严格，增删节点的体验也并不是很好，样式也不算太好看。所以对它进行重写和新增功能是必然的，很不巧这任务落到我头上来了。
改写OrgChart过程中，遇到了很多自己记得不太清楚的知识，做项目的时候直接花十几分钟在网上就可以找到解决方案。但是我不是太放心，都做了详细记录，现在就回过头来把遇到的问题再捋一遍，加深一下记忆！
上面都是故事背景，反正是我的博客，阅读量也就这么点，干脆破罐子破摔，我想怎么写就怎么写，想写什么就写什么。以前的博客基本上就是一个问题+对应解决方案，多少伸手党拿了代码就直接走了，评论都没有一个。我又何必在乎这些人的感受呢，支持都是相互的！
第一个问题是：用js实现自定义鼠标右键菜单功能
要实现这个，首先必须屏蔽掉鼠标右键的默认事件，这里的利用的“oncontextmenu”事件，该事件在用户右击鼠标时触发并打开上下文菜单。所以代码自然就出来了：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>鼠标右键事件</title><style>* {padding: 0;margin: 0;}#tar {height: 60px;width: 220px;background-color: #888888;text-align: center;line-height: 60px;}#menu {display: none;position: absolute;background-color: #FF0000;z-index: 2;}#menu ul li {list-style: none;}</style></head><body><p id="tar">这里是一些内容<menu id="menu"><ul><li>选项1</li><li>选项2</li><li>选项3</li></ul></menu></p><script>window.onload = function() {var el = document.getElementById("tar");var oMenu = document.getElementById("menu");el.oncontextmenu = function(e) {//左键--button属性=1，右键button属性=2if(e.button == 2) {e.preventDefault();var _x = e.clientX,_y = e.clientY;oMenu.style.display = "block";oMenu.style.left = _x + "px";oMenu.style.top = _y + "px";}}}</script></body></html>
代码大概就是这样子的，顺便做了一个在合适的位置出现菜单的操作。
然后呢，目前在火狐、谷歌和IE9以上都是OK的！所以屏蔽鼠标右键事件暂时就先写到这了。
喔，附张效果图，没图的话会有很大困扰：
