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

解决方案 »

  1.   

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