自定义右键菜单

Posted 2020-11-01 nelsonlei

　　本功能主要是实现自定义右键菜单，同时隐藏默认的右键菜单，只显示自己需要的菜单

 

　　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>