右键菜单问题,请大家帮我解决

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meat name="Author" content="孟宪会">
<style>
.menu{ cursor: hand;
display: none;
position: absolute;
top: 0; left: 0;
overflow: hidden;
background-color: "#CFCFCF";
border: "2 solid";
border-top-color: "#EFEFEF";
border-left-color: "#EFEFEF";
border-right-color: "#505050";
border-bottom-color: "#505050";
font: 10pt 宋体;
margin:0pt;padding: 2pt
}

.menu SPAN {width: 100%; cursor: hand; padding-left: 10pt;padding-bottom:2px}
.menu SPAN.selected {background: navy; color:white; cursor: hand;padding-top:2px}
</style>

<xml id="contextDef">
<xmldata>
<contextmenu id="demo">
<item id="viewsource" value="查看源文件"/>
<item id="back" value="后退……"/>
<item id="meng" value="访问【孟宪会之精彩世界】"/>
<item id="calculate" value="执行 JavaScript 代码"/>
</contextmenu>
<contextmenu id="demob">
<item id="菜单项例子1" value="菜单项例子1" />
<item id="菜单项例子2" value="菜单项例子2" />
</contextmenu>
</xmldata>
</xml>
<SCRIPT>
// 定义全局变量
var bContextKey=false;
function fnGetContextID(el) {
while (el!=null) {
if (el.contextmenu) return el.contextmenu
el = el.parentElement
}
return ""
}

function fnDetermine(){
oWorkItem=event.srcElement;
//键盘上的菜单键被按下时。
if(bContextKey==true){
//如果菜单的“状态”为“false”
if(oContextMenu.getAttribute("status")=="false"){
//捕获鼠标事件，以便和页面交互。
oContextMenu.setCapture();
//根据鼠标位置，确定菜单位置。
oContextMenu.style.top=event.clientY + document.body.scrollTop + 1;
oContextMenu.style.left=event.clientX + document.body.scrollLeft + 1;
oContextMenu.innerHTML="";

//设定菜单的“状态”为“true”
var sContext = fnGetContextID(event.srcElement)
if (sContext!="") {
fnPopulate(sContext)
oContextMenu.setAttribute("status","true");
event.returnValue=false;
}
else
event.returnValue=true
}
}
else{
// 如果键盘菜单键没有按下，并且菜单的“状态”为“true”。
if(oContextMenu.getAttribute("status")=="true"){
if((oWorkItem.parentElement.id=="oContextMenu") && (oWorkItem.getAttribute("component")=="menuitem"))
{
fnFireContext(oWorkItem)
}
// 当鼠标离开菜单或单击菜单项后，重设菜单（隐藏）
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
oContextMenu.innerHTML="";
event.returnValue=false;
}
}
}
function fnPopulate(sID)
{
var str=""
var elMenuRoot =
document.all.contextDef.XMLDocument.childNodes(0).selectSingleNode('contextmenu[@id="' + sID + '"]'
)
if (elMenuRoot) {
for(var i=0;i<elMenuRoot.childNodes.length;i++)
str+='<span component="menuitem" menuid="' + elMenuRoot.childNodes[i].getAttribute("id") +'" id=oMenuItem' + i + '>' + elMenuRoot.childNodes[i].getAttribute("value") + "</SPAN><BR>"
oContextMenu.innerHTML=str;
oContextMenu.style.display="block";
oContextMenu.style.pixelHeight = oContextMenu.scrollHeight
}
}

function fnChirpOn(){
if((event.clientX>0) &&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight))
{
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = "selected"
}
}
}
function fnChirpOff(){
if((event.clientX>0) && (event.clientY>0) && (event.clientX<document.body.offsetWidth) &&(event.clientY<document.body.offsetHeight))
{
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = ""
}
}
}

function fnInit(){
if (oContextMenu) {
oContextMenu.style.width=180;
oContextMenu.style.height=document.body.offsetHeight/2;
oContextMenu.style.zIndex=2;
//设置菜单样式
document.oncontextmenu=fnSuppress;
}
}

function fnInContext(el) {
while (el!=null) {
if (el.id=="oContextMenu") return true
el = el.offsetParent
}
return false
}

function fnSuppress(){
if (!(fnInContext(event.srcElement))) {
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
bContextKey=true;
}
fnDetermine();
bContextKey=false;
}

function javameng(){
window.open("http://lucky.myrice.com","_blank","width=400,height=400,top=20,left=20")
}

function fnFireContext(oItem) {
// 自定义上下文菜单项的功能
switch (oItem.menuid) {
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
case "meng":
location.href="http://lucky.myrice.com"
break;
case "calculate":
javameng()
break;
default:
alert("你点击的菜单项是:\n\n\n" + oItem.menuid +"啊！！！")
}
}
</SCRIPT>

<BODY onload="fnInit()" onclick="fnDetermine()" bgcolor="#0099ff">
<p contextmenu="Title" align="center" style="font-size:11pt; font-weight:bold; border:3px double #000099;padding:10px">利用XML创建上下文菜单<br><br>【<a href="http://lucky.myrice.com" style="font-size:9pt;font-weight:normal">孟宪会之精彩世界</a>】</p>
<div status="false" onmouseover="fnChirpOn()" onmouseout="fnChirpOff()" id="oContextMenu" class="menu"></div>这里放你任意的其他的东西！这个地方没有菜单！！！<br><br>
<P contextmenu="demo">这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br>这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br>这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br>这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br>这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br></p><p>你也可以把鼠标放到下面的图象上面，点击又键！<p>
<center><IMG SRC="http://lucky.myrice.com/back.jpg" contextmenu="demob">
</body>
</html>

net_loverm，你的这段程序很不错，不过好像还不太满足我的条件。
我现在要做的菜单就像WINDOWS XP浏览器的菜单一样，页面上有许多对象（图片、文字等）点对象以外的地方的右键出现一个多级菜单，点对象的右键出现对这个对象的操作菜单（这些对象是从数据库里读出来通过循环显示，每个对象都有ID号）。
这些菜单要被许多页面调用，那个多级菜单我已经有了，但是不能和点对象右键的菜单合起来用。你能不能帮我解决？多级菜单的代码太长了，我的QQ号码是59889106，能不能向你请教？谢谢!

这个比较简单，自己扩展...
<html>
<head>
<title>Lethe</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><link rel="stylesheet" href="css/Styles.css" type="text/css"><style>
#menu{
position:absolute;
width:125px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:150%;
cursor:default;
visiblity:hidden;
}
.menuitems{
padding-left:15px;
padding-right:15px;
}</style>
<script language="javascript"> function showmenu(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
   if (rightedge<menu.offsetWidth){
    menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth
}else{
menu.style.left=document.body.scrollLeft+event.clientX
          }
   if (bottomedge<menu.offsetHeight){
      menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight
  }else{
       menu.style.top=document.body.scrollTop+event.clientY
    }
   menu.style.visibility="visible"
   return false

}
   function hidemenu(){
      menu.style.visibility="hidden"
}
function over(){
//  if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundcolor="hightlight"
event.srcElement.style.color=""
  window.status=event.srcElement.url
//   }

}
function out(){
// if (event.srcElement.style.className=="menuitems"){
event.srcElement.style.backgroundcolor=""
event.srcElement.style.color="black"
window.tatus=""
// }
} function linkto(){
   if (event.srcElement.className=="menuitems"){
   window.location=event.srcElement.url
   }
     }

</script>
</head><body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="hidemenu()"><div id="menu"  onmouseover="over()" onmouseout="out()" onclick="linkto()" style="width: 154px; height: 105px; left: 88px; top: 40px" >
  <table width="1%" border="0" cellspacing="0" cellpadding="0" align="center" height="73">
    <tr>
      <td>
        <table border=0 cellpadding=0 cellspacing=0 width=150 align="center" >
          <tbody>
          <td class=MenuItem onClick="document.location = 'www.btu.com';" classdown="MenuItemClick" classover="MenuItemOver" bgcolor="#666666" rowspan="2">
            <a href="">交卷</a> </td>
          </tbody>
        </table>
      </td>
    </tr>
    <tbody>
    <td height=2 bgcolor=black>
    </tbody>
    <tr>
      <td height="46">
        <table border=0 cellpadding=0 cellspacing=0 width=150 align="center" height="15" >
          <tbody>
          <td class=MenuItem onClick="document.location = 'www.btu.com';" classdown="MenuItemClick" classover="MenuItemOver" bgcolor="#666666" rowspan="2">
            <a href="">上一题</a> </td>
          </tbody>
        </table>
        <table border=0 cellpadding=0 cellspacing=0 width=150 align="center" >
          <tbody>
          <td class=MenuItem onClick="document.location = 'www.btu.com';" classdown="MenuItemClick" classover="MenuItemOver" bgcolor="#666666" rowspan="2">
            <a href="">下一题</a> </td>
          </tbody>
        </table>
        <table border=0 cellpadding=0 cellspacing=0 width=150 align="center" >
          <tbody>
          <td class=MenuItem onClick="document.location = 'www.btu.com';" classdown="MenuItemClick" classover="MenuItemOver" bgcolor="#666666" rowspan="2">
            <a href="">帮助</a> </td>
          </tbody>
        </table>
      </td>
    </tr>
    <tbody>
    <td bgcolor="#000000" height=2>
    </tbody>
    <tr>
      <td height="30">
        <table border=0 cellpadding=0 cellspacing=0 width=150
align="center" >
          <tbody>
          <td class=MenuItem onClick="document.location = 'www.btu.com';" classdown="MenuItemClick" classover="MenuItemOver" bgcolor="#666666" rowspan="2" width="294">
            <a href="">北京工业大学首页</a> </td>
          </tbody>
        </table>
        <table border=0 cellpadding=0 cellspacing=0 width=150 align="center" >
          <tbody>
          <td class=MenuItem onClick="document.location = 'www.btu.com';" classdown="MenuItemClick" classover="MenuItemOver" bgcolor="#666666" rowspan="2">
            <a href="">呼叫管理员</a> </td>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</div>
<script language="javascript">
document.oncontextmenu=showmenu
if (document.all&&window.print){
document.body.onclick=hidemenu
}
</script>
</body>
</html>

使用event.srcElement.id做一个判断控制显示不同的菜单！

我看这里的代码头晕,是不是这个?
http://netroom.hbu.edu.cn/personal/stroll/mouse-menu2.htm

document.body.onClick=checkFunc()--->判断

document.body.onClick=checkFunc()--->判断
能不能做个例子出来参考一下？

调试易

右键菜单问题,请大家帮我解决

解决方案 »