怎样作右键菜单

<HTML>
<HEAD>
<TITLE>鼠标右键将不起作用！！！</TITLE>
<script language="JavaScript1.2"> 
if (window.Event) 
document.captureEvents(Event.MOUSEUP); function nocontextmenu()  
{
Layer1.style.left = event.clientX + document.body.scrollLeft;
Layer1.style.top = event.clientY + document.body.scrollTop;
Layer1.style.visibility = "visible";
event.cancelBubble = true;
event.returnValue = false;
return false;
}function norightclick(e)
{
if (window.Event)
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
else
if(event.button==1)
{
if(event.srcElement.nodeName=="BODY")
if(Layer1.style.visibility == "visible")
Layer1.style.visibility="hidden";
}
}document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;
</script>
</HEAD><BODY BGCOLOR="#FFFFFF">
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:73px; height:73px; z-index:1; visibility: hidden"> 
  <table border="1" cellspacing="1" cellpadding="1" width="100%" bordercolor="#999999">
    <tr>
      <td align="center">新增</td>
    </tr>
    <tr>
      <td align="center">修改</td>
    </tr>
    <tr>
      <td align="center">删除</td>
    </tr>
  </table>
</div>
鼠标右键将不起作用！！！ 
</BODY>
</HTML>

解决方案 »

  1.   

    跟上面的差不多
    <div id="context_menu" style="width:150px;border:1px solid black;background-color:#EEEEEE;visibility:hidden;position:absolute;line-height:30px">
    <a href="http://freewarejava.com">Freewarejava.com</a><br>
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
    <a href="http://www.cooltext.com">Cool Text</a><br>
    <a href="http://freewarejava.com/cgi-bin/Ultimate.cgi">WA Developer Forum</a><br>
    <a href="http://www.webmonkey.com">Web Monkey</a><br>
    </div><script>var ie5=document.allfunction displaymenu(e){
    el=document.getElementById("context_menu")
    if (ie5){
    if (event.type=="contextmenu"){ //if right click
    el.style.left=event.clientX
    el.style.top=document.body.scrollTop+event.clientY
    el.style.visibility="visible"
    return false;//屏蔽真正的右键
    }
    else if (event.type=="click") //if left click
    el.style.visibility="hidden"
    }
    }
    if (ie5){
    document.attachEvent("oncontextmenu",displaymenu)
    document.attachEvent("onclick",displaymenu)
    }
    </script>
      

  2.   

    <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>