鼠標右擊事件(javascript)

本程序由一個js文件和aspx文件組成，沒有後臺CS代碼。

js代碼如下：

    <script type="text/javascript">
    //禁用右鍵菜單
    document.οncοntextmenu=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="width:170px; height:300px; border-style:solid;border-width:1px; border-color:#A09F9F; background-color:White; display:none; position:relative; padding:1px 1px 1px 1px;">
        <!--文件常用菜單-->
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/menu1_click.jpg')" οnmοuseοut="MenuOnMouseOut(this,'Images/menu1.jpg')" style="background-image:url('Images/menu1.jpg')" οnclick="OnCopyFolderMenuClcik()">
            創建新文件夾
        </div>
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/menu2_click.jpg')" οnmοuseοut="MenuOnMouseOut(this,'Images/menu2.jpg')" style="background-image:url('Images/menu2.jpg')">
           搜索新文件夾
        </div>
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/menu3_click.jpg')" οnmοuseοut="MenuOnMouseOut(this,'Images/menu3.jpg')" style="background-image:url('Images/menu3.jpg')">
            刪除該文件夾
        </div>
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/menu4_click.jpg')" οnmοuseοut="MenuOnMouseOut(this,'Images/menu4.jpg')" style="background-image:url('Images/menu4.jpg')">
            全部刪除
        </div>
        <!--非常用菜單-->
        <hr style="color:#A09F9F;width:160px; height:1px;"/>
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/menu5_click.jpg','true','ChildDiv')" οnmοuseοut="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="width:170px; height:200px; z-index:2; background-color:White;border-style:solid; border-width:1px; border-color:#A09F9F; display:none; position:absolute; padding:1px 1px 1px 1px;">
        <!--文件常用菜單-->
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/child_menu1_click.jpg')" οnmοuseοut="MenuOnMouseOut(this,'Images/child_menu1.jpg')" style="background-image:url('Images/child_menu1.jpg')">
            名稱
        </div>
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/child_menu2_click.jpg')" οnmοuseοut="MenuOnMouseOut(this,'Images/child_menu2.jpg')" style="background-image:url('Images/child_menu2.jpg')">
            創建時間
        </div>
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/child_menu3_click.jpg')" οnmοuseοut="MenuOnMouseOut(this,'Images/child_menu3.jpg')" style="background-image:url('Images/child_menu3.jpg')">
            類型
        </div>
        <div class="MenuDivDefault" οnmοuseοver="MenuOnMouseOver(this,'Images/child_menu4_click.jpg')" οnmοuseοut="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" %>
控件具體屬性意義請查詢百度。

 

後記：效果圖程序如上所述，如果要實現菜單的實際功能，需要進一步用Javascript與服務器通信來完成。
有機會再發上去。