自定义右键菜单
Posted nelsonlei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义右键菜单相关的知识,希望对你有一定的参考价值。
本功能主要是实现自定义右键菜单,同时隐藏默认的右键菜单,只显示自己需要的菜单
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>
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>
以上是关于自定义右键菜单的主要内容,如果未能解决你的问题,请参考以下文章