2017-12-18日，2017年即将結束的日子裡。
公司做了一個項目，主要難點在于實作公司組織架構圖上，何謂組織架構圖，如下便是：
這裡的每個節點都有相應的右鍵菜單，說白了就跟你用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屬性=2
if(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的！是以屏蔽滑鼠右鍵事件暫時就先寫到這了。
喔，附張效果圖，沒圖的話會有很大困擾：
