本功能主要是實現自定義右鍵菜單，同時隱藏默認的右鍵菜單，只顯示自己需要的菜單

　　HTML：

 1 <!--自定義右鍵菜單html代碼-->
 2 <div id="menu">
 3     <ul>
 4         <li>幫助</li>
 5         <li>設置</li>
 6         <li>復制</li>
 7         <li>粘貼</li>
 8         <li>剪切</li>
 9
 
     </ul>
10 </div>

　　css：

 1 <style>
 2         *{ margin: 0; padding: 0; }
 3         #menu{
 4             width: 80px;
 5             background: #CCC;
 6             position: absolute;
 7             display: none;
 8         }
 9         #menu ul{
10             width: 100%;
11
 
             list-style: none;
12             border: 2px solid #666;
13             border-bottom: 0px;
14         }
15         #menu ul li{
16             height: 30px;
17             font-size: 16px;
18             color: #333;
19             line-height: 30px;
20             text-align: center;
21             border-bottom
 
: 2px solid #666;
22         }
23     </style>

　　JavaScript：

 1 <script>
 2     window.onload=function(){
 3         var menu=document.getElementById("menu");
 4 
 5         document.oncontextmenu=function(ev){
 6             var ev=ev||event;
 7             var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 8 
 9             menu.style.display="block";
10             menu.style.left=ev.clientX+"px";
11             //當滑動滾動條時也能準確獲取菜單位置
12             menu.style.top=ev.clientY+scrollTop+"px";
13             //阻止默認菜單事件
14             return false;
15         }
16 
17         //點擊空白部分+菜單
18         document.onclick= function () {
19             menu.style.display=‘none‘;
20             console.log(this);
21         }
22 
23         //點擊菜單
24         menu.onclick = function(e) {
25             var e = e || window.event;
26             e.cancelBubble = true;
27         }
28     }
29 </script>

自定義右鍵菜單