我想做一个右键菜单,但单机右键菜单的“新增”项时总是获取不到document.menuForm.text1的值,提示“document.menuForm.text1 为空或不是对象”,但是在showMenu(id)方法中给document.menuForm.text1 赋值却正常。代码如下,请高手指点:<html>
<body oncontextmenu = showMenu('')> <form name="menuForm" action=""> <!--隐藏框,用来保存选择的菜单的id值-->
<input type="text" value="0" name="text1" id="textt"/> <table> <tr><td><a href="" oncontextmenu = showMenu('0')>根目录</a></td></tr> <tr><td><a href="" oncontextmenu = showMenu('1')>菜单一</a></td></tr> <tr><td><a href="" oncontextmenu = showMenu('2')>菜单二</a></td></tr> </table>
<!-- 这里用来定义需要显示的右键菜单 --> <div style="display:none" id="itemMenu">
<table border="1" width="100%" height="100%" bgcolor="#cccccc" style="border:thin" cellspacing="0"> <tr> <td style="cursor:default;border:outset 1;" align="center" > <a href="" onclick="alert(document.menuForm.text1.value)">新增</a> </td> </tr> <tr> <td style="cursor:default;border:outset 1;" align="center" > 修改 </td> </tr> <tr> <td style="cursor:default;border:outset 1;" align="center" > 删除 </td> </tr> </table>
</div> <!-- 右键菜单结束-->
</form> </body>
</html><script language="JavaScript">/***根据传入的id显示右键菜单*/function showMenu(id){
document.menuForm.text1.value=id;
if("" == id)
{
popMenu(itemMenu,100,"100");
}
else
{
popMenu(itemMenu,100,"111");
}
event.returnValue=false;
event.cancelBubble=true;
return false;
}/***显示弹出菜单*menuDiv:右键菜单的内容*width:行显示的宽度*rowControlString:行控制字符串,0表示不显示,1表示显示,如“101”,则表示第1、3行显示,第2行不显示*/function popMenu(menuDiv,width,rowControlString){ //创建弹出菜单 var pop=window.createPopup(); //设置弹出菜单的内容 pop.document.body.innerHTML=menuDiv.innerHTML; var rowObjs=pop.document.body.all[0].rows; //获得弹出菜单的行数 var rowCount=rowObjs.length; //循环设置每行的属性 for(var i=0;i<rowObjs.length;i++) { //如果设置该行不显示,则行数减一 var hide=rowControlString.charAt(i)!='1'; if(hide){ rowCount--; } //设置是否显示该行 rowObjs[i].style.display=(hide)?"none":""; //设置鼠标滑入该行时的效果 rowObjs[i].cells[0].onmouseover=function() { this.style.background="#818181"; this.style.color="white"; } //设置鼠标滑出该行时的效果 rowObjs[i].cells[0].onmouseout=function(){ this.style.background="#cccccc"; this.style.color="black"; } } //屏蔽菜单的菜单 pop.document.oncontextmenu=function()
{
return false;
} //选择右键菜单的一项后,菜单隐藏 pop.document.onclick=function()
{
pop.hide();
} //显示菜单 pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body); return true;}function create(){ alert("create" + menuForm.id.value + "!");}function update(){ alert("update" + menuForm.id.value + "!");}function del(){ alert("delete" + menuForm.id.value + "!");}function clickMenu(){ alert("you click a menu!");}</script>
<body oncontextmenu = showMenu('')> <form name="menuForm" action=""> <!--隐藏框,用来保存选择的菜单的id值-->
<input type="text" value="0" name="text1" id="textt"/> <table> <tr><td><a href="" oncontextmenu = showMenu('0')>根目录</a></td></tr> <tr><td><a href="" oncontextmenu = showMenu('1')>菜单一</a></td></tr> <tr><td><a href="" oncontextmenu = showMenu('2')>菜单二</a></td></tr> </table>
<!-- 这里用来定义需要显示的右键菜单 --> <div style="display:none" id="itemMenu">
<table border="1" width="100%" height="100%" bgcolor="#cccccc" style="border:thin" cellspacing="0"> <tr> <td style="cursor:default;border:outset 1;" align="center" > <a href="" onclick="alert(document.menuForm.text1.value)">新增</a> </td> </tr> <tr> <td style="cursor:default;border:outset 1;" align="center" > 修改 </td> </tr> <tr> <td style="cursor:default;border:outset 1;" align="center" > 删除 </td> </tr> </table>
</div> <!-- 右键菜单结束-->
</form> </body>
</html><script language="JavaScript">/***根据传入的id显示右键菜单*/function showMenu(id){
document.menuForm.text1.value=id;
if("" == id)
{
popMenu(itemMenu,100,"100");
}
else
{
popMenu(itemMenu,100,"111");
}
event.returnValue=false;
event.cancelBubble=true;
return false;
}/***显示弹出菜单*menuDiv:右键菜单的内容*width:行显示的宽度*rowControlString:行控制字符串,0表示不显示,1表示显示,如“101”,则表示第1、3行显示,第2行不显示*/function popMenu(menuDiv,width,rowControlString){ //创建弹出菜单 var pop=window.createPopup(); //设置弹出菜单的内容 pop.document.body.innerHTML=menuDiv.innerHTML; var rowObjs=pop.document.body.all[0].rows; //获得弹出菜单的行数 var rowCount=rowObjs.length; //循环设置每行的属性 for(var i=0;i<rowObjs.length;i++) { //如果设置该行不显示,则行数减一 var hide=rowControlString.charAt(i)!='1'; if(hide){ rowCount--; } //设置是否显示该行 rowObjs[i].style.display=(hide)?"none":""; //设置鼠标滑入该行时的效果 rowObjs[i].cells[0].onmouseover=function() { this.style.background="#818181"; this.style.color="white"; } //设置鼠标滑出该行时的效果 rowObjs[i].cells[0].onmouseout=function(){ this.style.background="#cccccc"; this.style.color="black"; } } //屏蔽菜单的菜单 pop.document.oncontextmenu=function()
{
return false;
} //选择右键菜单的一项后,菜单隐藏 pop.document.onclick=function()
{
pop.hide();
} //显示菜单 pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body); return true;}function create(){ alert("create" + menuForm.id.value + "!");}function update(){ alert("update" + menuForm.id.value + "!");}function del(){ alert("delete" + menuForm.id.value + "!");}function clickMenu(){ alert("you click a menu!");}</script>
alert(document.getElementById('textt').value);
这些是干什么用的啊
我也不知道为什么获取不到Form里的窗体。
oncontextmenu是右键的事件,body里加了这个以后,在页面里右键单击鼠标会显示右键菜单。
在<a href='' oncontextmenu=showMenu('1')>里加oncontextmenu后,右键单击链接也会弹出自定义的右键菜单。
弹出的DOM和表单不在一个环境里边。
这样就行了。
谢谢!用这个方法倒是没有报错,但是alert显示的是<table>……</table>代码。这段代码是<div>标签括住的那段代码,不是我想要的id值。