鼠标右击事件

本程序由一个js文件和aspx文件组成，没有后台CS代码。

js代码如下：

    <script type="text/javascript">
    //禁用右键菜单
    document.oncontextmenu=ContextMenu;
    //鼠标右击事件
    function ContextMenu()
    {
       //创建两个变量,作为菜单出现的坐标
       var x;
       var y;
       //获取菜单外部Div(下面简称面板)
       var FramePanel=document.getElementById("FrameDiv");
       //获取面板宽度和高度
       var PanelWidth=parseInt(FramePanel.style.width.replace("px",""));
       var PanelHeight=parseInt(FramePanel.style.height.replace("px",""));
       //获取鼠标坐标
       var MouseX=event.clientX;
       var MouseY=event.clientY;
       //获取网页窗口宽度和高度
       var WindowWidth=document.body.offsetWidth;
       var WindowHeight=document.documentElement.offsetHeight;
      
       //如果鼠标X坐标+面板宽度>网页窗口宽度,则面板左边显示
       if((MouseX+PanelWidth)>=WindowWidth)
       {
            x=MouseX-PanelWidth-20;
       }
       else
       {
            x=MouseX;
       }
        //如果鼠标Y坐标+面板高度>网页窗口高度,则面板上边显示
       if((MouseY+PanelHeight)>=WindowHeight)
       {
            y=MouseY-PanelHeight-20;
       }
       else
       {
            y=MouseY;
       }
 
       //显示面板
       FramePanel.style.left=x;
       FramePanel.style.top=y;
       FramePanel.style.display="block";
      
       //隐藏二级菜单
       document.getElementById("ChildDiv").style.display="none";
      
       return false;//这句代码即等于event.returnValue=false;
    }
   
    //鼠标选择该菜单,参数说明:arg为该菜单Div,imageUrl指要替换的image地址,hasChildMenu指该菜单是否有子菜单,childPanelId指子菜单ID(如果有子菜单的话)
    function MenuOnMouseOver(arg,imageUrl,hasChildMenu,childPanelId)
    {
        //替换背景图片(图片路径为相对路径)
        arg.style.backgroundImage="url('"+imageUrl+"')";
        //改变div背景颜色
        arg.style.backgroundColor="#1665CB";
        //改变字体颜色
        arg.style.color="#ffffff";
       
        //如果该菜单下有子菜单
        if(hasChildMenu)
        {
           //创建两个变量,作为菜单出现的坐标
           var x;
           var y;
           //获取子菜单Div(下面简称子面板)
           var ChildPanel=document.getElementById(childPanelId);
           //debugger;
           //获取子面板宽度和高度
           var ChildPanelWidth=parseInt(ChildPanel.style.width.replace("px",""));
           var ChildPanelHeight=parseInt(ChildPanel.style.width.replace("px",""));
           //获取父亲菜单Div(下面简称父面板)
           var FramePanel=event.srcElement;
           //获取父面板宽度和高度
           var PanelWidth=FramePanel.offsetWidth;
           var PanelHeight=FramePanel.offsetHeight;
           //获取鼠标坐标
           var MouseX=event.clientX;
           var MouseY=event.clientY;
           //获取鼠标在父面板的偏移位置
           var MouseOffsetWidth=event.offsetX;
           var MouseOffsetHeight=event.offsetY;
           //获取网页窗口宽度和高度
           var WindowWidth=document.body.offsetWidth;
           var WindowHeight=document.documentElement.offsetHeight;
           //如果鼠标X坐标+面板宽度+子面板宽度>网页窗口宽度,则面板左边显示
           if((MouseX-MouseOffsetWidth+PanelWidth+ChildPanelWidth)>=WindowWidth)
           {
                x=MouseX-MouseOffsetWidth-ChildPanelWidth-3;
           }
           else
           {
                x=MouseX-MouseOffsetWidth+PanelWidth-5;
           }
            //如果鼠标Y坐标+面板高度>网页窗口高度,则面板上边显示
           if((MouseY-MouseOffsetHeight+ChildPanelHeight)>=WindowHeight-30)
           {
                y=MouseY-MouseOffsetHeight-ChildPanelHeight-15;
           }
           else
           {
                y=MouseY-MouseOffsetHeight+5;
           }
          
           //显示面板
           ChildPanel.style.left=x;
           ChildPanel.style.top=y;
           ChildPanel.style.display="block";
        }
      
    }
   
    //鼠标离开该菜单
    function MenuOnMouseOut(arg,imageUrl,hasChildMenu,childPanelId)
    {
        if(hasChildMenu)
        {
            //子菜单div(以下简称子面板)
            var ChildPanel=document.getElementById(childPanelId);
            var ToElement=event.toElement;
            //这里要注意,鼠标有可能移动到子面板的子孙div中,此时event.ToElement的DOM元素!=ChildPanel(子面板),event.ToElement.parentNode=ChildPanel,
            if(ToElement==ChildPanel||ToElement.parentNode==ChildPanel)
            {
                ChildPanel.style.display="block";
            }
            else
            {
                ChildPanel.style.display="none";
            }
        }
        //替换背景图片(图片路径为相对路径)
        arg.style.backgroundImage="url('"+imageUrl+"')";
        //改变div背景颜色
        arg.style.backgroundColor="#ffffff";
        //改变字体颜色
        arg.style.color="#000000";
    }
   
</script>
  

页面ASPX代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContextMenu.aspx.cs" Inherits="ContextMenu" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <link href="Css/StyleSheet.css" rel="Stylesheet" type="text/css"/>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <!--上下文菜单一级菜单-->
    <div id="FrameDiv" runat="server" style="170px; height:300px; border-style:solid;border-1px; border-color:#A09F9F; background-color:White; display:none; position:relative; padding:1px 1px 1px 1px;">
        <!--文件常用菜单-->
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu1_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu1.jpg')" style="background-image:url('Images/menu1.jpg')" onclick="OnCopyFolderMenuClcik()">
            创建新文件夹
        </div>
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu2_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu2.jpg')" style="background-image:url('Images/menu2.jpg')">
           搜索新文件夹
        </div>
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu3_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu3.jpg')" style="background-image:url('Images/menu3.jpg')">
            删除该文件夹
        </div>
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu4_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu4.jpg')" style="background-image:url('Images/menu4.jpg')">
            全部删除
        </div>
        <!--非常用菜单-->
        <hr style="color:#A09F9F;160px; height:1px;"/>
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu5_click.jpg','true','ChildDiv')" onmouseout="MenuOnMouseOut(this,'Images/menu5.jpg','true','ChildDiv')" style="background-image:url('Images/menu5.jpg')">
            文件排序
        </div>
    </div>
    <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="FrameDiv" Width="2" TrackPosition="true" Opacity="0.3">
    </cc1:DropShadowExtender>
   
     <!--上下文菜单二级菜单-->
    <div id="ChildDiv" runat="server" style="170px; height:200px; z-index:2; background-color:White;border-style:solid; border-1px; border-color:#A09F9F; display:none; position:absolute; padding:1px 1px 1px 1px;">
        <!--文件常用菜单-->
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/child_menu1_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/child_menu1.jpg')" style="background-image:url('Images/child_menu1.jpg')">
            名称
        </div>
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/child_menu2_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/child_menu2.jpg')" style="background-image:url('Images/child_menu2.jpg')">
            创建时间
        </div>
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/child_menu3_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/child_menu3.jpg')" style="background-image:url('Images/child_menu3.jpg')">
            类型
        </div>
        <div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/child_menu4_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/child_menu4.jpg')" style="background-image:url('Images/child_menu4.jpg')">
            大小
        </div>
    </div>
    <cc1:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="ChildDiv" Width="2" TrackPosition="true" Opacity="0.3">
    </cc1:DropShadowExtender>
    </form>
</body>
</html>

注意这句：

 <cc1:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="ChildDiv" Width="2" TrackPosition="true" Opacity="0.3">
    </cc1:DropShadowExtender>
这个控件是ASP.NET AJAX1.0中实现阴影效果的控件，因此要在aspx页面添加控件注册：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
控件具体属性意义请查询百度。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/fredlau/archive/2008/04/09/2270003.aspx