谁给个js实现的右键菜单，简单的就行

coolzdp 2008-12-25 09:58:47

在可设置某个element上右键响应弹出，
选择菜单项，然后获取选中的序号

...全文

97 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

liuyilidan 2008-12-25

打赏
举报

<%@ Page language="c#" Codebehind="MouseRightMenu.aspx.cs" AutoEventWireup="false" Inherits="test.WebForm6" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

	<HEAD>

		<title>MouseRightMenu</title>

		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">

		<meta name="CODE_LANGUAGE" Content="C#">

		<meta name="vs_defaultClientScript" content="JavaScript">

		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

		<style type="text/css"> .skin0 { BORDER-RIGHT: #00ffcc 2px solid; BORDER-TOP: #00ffcc 2px solid; VISIBILITY: hidden; BORDER-LEFT: #00ffcc 2px solid; WIDTH: 100px; CURSOR: default; LINE-HEIGHT: 20px; PADDING-TOP: 4px; BORDER-BOTTOM: #00ffcc 2px solid; FONT-FAMILY: "宋体"; POSITION: absolute; BACKGROUND-COLOR: #33ffff; TEXT-ALIGN: left }

	.menuitems { PADDING-RIGHT: 1px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px }

		</style>

		<script language="javascript">

		function CreateMouseRight()

		{

			var InnerHtml = "<div onselectstart='return false' id='ClickMenu' class='skin0' onMouseover='HighLight()'";

			InnerHtml += "onMouseout='LowLight()' onClick='JumpTo();'>"

			InnerHtml += "<DIV id='divCopy' class='menuitems' url='javascript:RPaste();'>粘贴</DIV>";

			InnerHtml += "<HR><DIV id='divPaste' class='menuitems' url='javascript:Delete();'>删除</DIV></div>";

			

			document.getElementById("divMouseRight").innerHTML = InnerHtml;

			

			if (document.all && window.print)                               //如果当前浏览器是Internet Explorer，document.all就返回真 

			{

				document.oncontextmenu = ShowMenu;                          //重定向鼠标右键事件的处理过程为自定义程序ShowMenu 

				document.body.onclick = HideMenu;                           //重定向鼠标左键事件的处理过程为自定义程序HideMenu 

			}

		}

		

		var MenuSkin = "skin0";                                                        //选择菜单样式

		var DisplayUrl = 0;                                                            //是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串 



		//创建右键区域

		function ShowMenu() 

		{ 

			

			var RightEdge = document.body.clientWidth-event.clientX;                    //获取当前鼠标右键按下后的位置，据此定义菜单显示的位置 

			var BottomEdge = document.body.clientHeight-event.clientY;

			

			var oDivElement = document.getElementById("ClickMenu");



			

			if (RightEdge <	oDivElement.offsetWidth)            //如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度 

			{

				document.oDivElement.style.left = document.body.scrollLeft + event.clientX - oDivElement.offsetWidth;

			}

			else                                                                        //否则，就定位菜单的左坐标为当前鼠标位置

			{

				oDivElement.style.left = document.body.scrollLeft + event.clientX;

			}

			

			if (BottomEdge <document.getElementById("ClickMenu").offsetHeight)          //如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度 

			{ 

				oDivElement.style.top = document.body.scrollTop + event.clientY - oDivElement.offsetHeight;

			} 

			else                                                                        //否则，就定位菜单的上坐标为当前鼠标位置 

			{

				oDivElement.style.top = document.body.scrollTop + event.clientY;

			}

			

			if(IsCanEdit())                                                              //设置菜单可见 

			{

				oDivElement.style.visibility = "visible"; 

				oDivElement.style.zIndex = 101;

			}

			return false; 

		}



		//隐藏右键区域

		function HideMenu() 

		{ 

			

			document.getElementById("ClickMenu").style.visibility = "hidden";             //隐藏菜单

		} 



		//高亮度鼠标经过的菜单条项目

		function HighLight() 

		{ 

			

			if (event.srcElement.className == "menuitems")								  //如果鼠标经过的对象是menuitems，就重新设置背景色与前景色

			{ 

				event.srcElement.style.backgroundColor = "highlight"; 

				event.srcElement.style.color = "white"; 

			} 

		} 



		//恢复菜单条项目的正常显示

		function LowLight() 

		{

			if (event.srcElement.className == "menuitems") 

			{ 

				event.srcElement.style.backgroundColor = ""; 

				event.srcElement.style.color = "black"; 

			} 

		} 



		//右键下拉菜单功能跳转

		//执行单击事件

		function JumpTo() 

		{ 

			var seltext=window.document.selection.createRange().text                        //转到新的链接位置 



			if (event.srcElement.className == "menuitems") 

			{ 

				

				if (event.srcElement.getAttribute("target") != null)                        //如果存在打开链接的目标窗口，就在那个窗口中打开链接 

				{

					window.open(event.srcElement.url, event.srcElement.getAttribute("target"));

				}

				else                                                                        //否则，在当前窗口打开链接

				{ 

					window.location = event.srcElement.url;

				}

			} 

		}



		//在选择区域才能实现自定义右键

		function IsCanEdit()

		{

			var isCan = false;

			var oElement = event.srcElement;

			var MyTag = event.srcElement.tagName;

			//if(MyTag == "imgS"||MyTag == "span")//在此限制当在何处右键有效

			//{

				isCan = true;

			//}

			return isCan;

		}

		</script>

	</HEAD>

	<body MS_POSITIONING="GridLayout" onload="CreateMouseRight()">

		<form id="Form1" method="post" runat="server">

			<div id="divMouseRight"><FONT face="宋体"></FONT></div>

		</form>

	</body>

</HTML>

大王带我来巡山 2008-12-25

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Popup对象实现右键菜单</TITLE>
<script language="JavaScript">
var oPopup = window.createPopup();
function contextMenu()
{

var left = event.offsetX+10;
var top = event.offsetY+10;
oPopup.document.body.innerHTML = oContext.innerHTML;
oPopup.show(left, top, 120, 80, window.document.body);

}
</script>
</head>
<body oncontextmenu="contextMenu(); return false;">
<h1>Popup对象实现右键菜单</h1>
单击鼠标右键查看效果
<div ID="oContext" style="DISPLAY: none; BACKGROUND: #e4e4e4; ">
<div onmouseover="this.style.background='gold'"
onmouseout="this.style.background='#e4e4e4'"
<span onclick='parent.location.href="http://www.zol.com.cn"'>
中关村在线</span>
</div>
<div onmouseover="this.style.background='gold'"
onmouseout="this.style.background='#e4e4e4'"
<span onclick="parent.location.href='http://www.cfan.com.cn'">
电脑爱好者</span>
</div>
<div onmouseover="this.style.background='gold';"
onmouseout="this.style.background='#e4e4e4';">
<span onclick="parent.location.href='http://www.sina.com.cn'">
新浪网</span>
</div>
<div onmouseover="this.style.background='gold'"
onmouseout="this.style.background='#e4e4e4'"
<span onclick="parent.location.href='http://www.xinhuanet.com'">
新华网</span>
</div>

</div>
</body>
</html>

资料引用:http://www.knowsky.com/340178.html