<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>javascript右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> .DreamMenu { position: absolute; visibility: hidden; z-index: 100; overflow: hidden; width: 150px; background-color: buttonface; border: dimgray 1px solid !important; border: buttonhighlight menu menu buttonhighlight 2px outset; padding: 1px !important; padding: 1px 1px 1px 0px; font-size: 12px; } .DreamMenu ul { margin: 1px; border-bottom: buttonhighlight 1px solid; border-top: buttonshadow 1px solid; } .DreamMenu a { display: block; width: 100%; padding: 1px 2px 2px 20px; cursor: default; text-decoration: none; color: #000000; } .DreamMenu a:hover { background: highlight; color: #ffffff; } </style> </head> <body menu=‘menu‘> <!---这段js最好写进文件方便用，为了在51能运行就直接写进来了---> <script> /*** DreamCore - JsLib/Menu Date : Dec 03, 2006 Copyright: DreamSoft Co.,Ltd. Mail : Dream@Dreamsoft.Ca Author : Egmax Browser : IE5.0&+,Firefox1.5&+,Netscape7.0&+ Update: ***/ if (!document.all) document.captureEvents(Event.MOUSEDOWN); var _Tmenu = 0; var _Amenu = 0; var _Type = ‘A‘; var _Menu = "null"; document.onclick = _Hidden; function _Hidden() { if (_Tmenu == 0) return; document.getElementById(_Tmenu).style.visibility = ‘hidden‘; _Tmenu = 0; } document.oncontextmenu = function (e) { _Hidden(); var _Obj = document.all ? event.srcElement : e.target; if (_Type.indexOf(_Obj.tagName) == -1) return; _Amenu = _Obj.getAttribute(‘menu‘); if (_Amenu == ‘null‘) return; if (document.all) e = event; _ShowMenu(_Amenu, e); return false; } function _ShowMenu(Eid, event) { _Menu = document.getElementById(Eid); var _Left = event.clientX + document.body.scrollLeft; var _Top = event.clientY + document.body.scrollTop; _Menu.style.left = _Left.toString() + ‘px‘; _Menu.style.top = _Top.toString() + ‘px‘; _Menu.style.visibility = ‘visible‘; _Tmenu = Eid; _Menu.onclick = transfer; _Menu.oncontextmenu = no_context_menu; } function transfer(e) { e = e || window.event; e.cancelBubble = true; } function no_context_menu(e) { e = e || window.event; e = e || window.event; e.cancelBubble = true; return; } /*** 可以支持其他标签INPUT,IMG ***/ </script> <script> _Type = ‘INPUT,A,DIV,BODY,IMG‘;</script> <!-----设置一个菜单层----> <div id="menu" class=‘DreamMenu‘> <a href=‘javascript:;‘>您好</a> <a href=‘javascript:;‘>我是主菜单</a> <a href=‘javascript:;‘> 在页面上单击</a> <a href=‘javascript:;‘>就可以看到我</a> <ul> </ul> <a href=‘javascript:;‘>打印</a> </div> <!-----设置一个菜单层----> <div id="menu2" class=‘DreamMenu‘> <a href=‘javascript:;‘>哈哈</a> <a href=‘javascript:;‘>我是个链接</a> <a href=‘javascript:;‘> 好开心啊</a> <a href=‘javascript:;‘>查看</a> <ul> </ul> <a href=‘javascript:;‘>打印</a> </div> <!-----设置一个菜单层----> <div id="menu3" class=‘DreamMenu‘> <a href=‘javascript:;‘>哈哈</a> <a href=‘javascript:;‘>我是图片</a> <a href=‘javascript:;‘> 虽然打不开</a> <a href=‘javascript:;‘>查看</a> <ul> </ul> <a href=‘javascript:;‘>打印</a> </div> <table> <tr> <td height="100"> <!-----设置一个菜单menu属性----> <a href=‘javascript:;‘ menu=‘menu2‘>菜单1</a> <a href=‘javascript:;‘ menu=‘menu2‘>菜单2</a> </td> </tr> </table> <div style=‘height: 300;‘ menu=‘menu‘> </div> <img src=‘qiougou.gif‘ menu=‘menu3‘ /> </body> </html>