这篇文章主要为大家详细介绍了 JavaScript 实现右键菜单功能, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/CSS">
- #menu {
- height: 200px;
- width: 50px;
- border: 1px solid gray;
- background-color: antiquewhite;
- padding: 10px;
- display: none;
- position: absolute;
- }
- ul,
- li {
- margin: 0;
- padding: 0;
- list-style-type: none;
- line-height: 40px;
- }
- </style>
- </head>
- <body>
- <div id="menu">
- <ul>
- <li>复制</li>
- <li>粘贴</li>
- <li>运行</li>
- <li>工具</li>
- <li>帮助</li>
- </ul>
- </div>
- </body>
- <script type="text/javascript">
- var menu = document.getElementById("menu");
- document.oncontextmenu = function(ev) {
- var oEvent = ev || event;
- //自定义的菜单显示
- menu.style.display = "block";
- //让自定义菜单随鼠标的箭头位置移动
- menu.style.left = oEvent.clientX + "px";
- menu.style.top = oEvent.clientY + "px";
- //return false阻止系统自带的菜单,
- //return false必须写在最后,否则自定义的右键菜单也不会出现
- return false;
- }
- //实现点击document,自定义菜单消失
- document.onclick = function() {
- menu.style.display = "none";
- }
- </script>
- </html>
来源: http://www.phperz.com/article/17/0516/329923.html