使用JavaScript和CSS实现自定义的右键菜单,即在body中任意点击右键弹出自定义的右键菜单。主要使用document.oncontextmenu事件来实现右键菜单。下面是详细实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义右键菜单</title> <style type="text/css"> body,ul,li{ margin: 0px; padding: 0px; } body{ font: 12px/24px arial; } #menu{ position: absolute; top: -9999px; left: -9999px; width: 100px; border-radius: 3px; list-style-type: none; border: 1px solid #8F8F8F; padding: 2px; background: #FFFFFF; } #menu li{ position: relative; height: 24px; padding-left: 24px; background: #EAEAD7; vertical-align: top; } #menu li a{ display: block; color: #333333; background: #FFFFFF; padding-left: 5px; text-decoration: none; } #menu li.active{ background: #999999; } #menu li.active a{ color: #FFFFFF; background: #8F8F8F; } #menu li em{ position: absolute; top: 0px; left: 0px; width: 24px; height: 24px; background: url(https://www.codefans.net/jscss/demoimg/201206/ico.png) no-repeat; } #menu li em.cur{ background-position: 0px 0px; } #menu li em.copy{ background-position: 0px -24px; } #menu li em.paste{ background-position: 0px -48px; } </style> <script type="text/javascript"> window.onload = function () { var oMenu = document.getElementById("menu"); var aLi = oMenu.getElementsByTagName("li"); //加载后隐藏自定义右键菜单 oMenu.style.display = "none"; //菜单鼠标移入/移出样式 for (var i = 0; i < aLi.length; i ++) { aLi[i].onmouseover = function () { this.className = "active" }; aLi[i].onmouseout = function () { this.className = "" } } //自定义菜单 document.oncontextmenu = function (event) { var event = event || window.event; var style = oMenu.style; style.display = "block"; style.top = event.clientY + "px"; style.left = event.clientX + "px"; return false; // 取消默认行为 }; //页面点击后自定义菜单消失 document.onclick = function (){ oMenu.style.display = "none" } }; </script> </head> <body> <center>自定义右键菜单,请在页面点击右键查看效果。</center> <ul id="menu"> <li><em class="cut"></em><a href="javascript:;">剪切</a></li> <li><em class="copy"></em><a href="javascript:;">复制</a></li> <li><em class="paste"></em><a href="javascript:;">粘贴</a></li> </ul> </body> </html>
运行效果图: