鼠标右击事件代码(asp.net后台)

　　js代码如下：

复制代码代码如下:

　　//禁用右键菜单

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

　　</head>

　　<body>

　　<asp:ScriptManager ID="ScriptManager1" runat="server">

　　</asp:ScriptManager>

　　创建新文件夹

　　</div>

　　搜索新文件夹

　　</div>

　　删除该文件夹

　　</div>

　　全部删除

　　</div>

　　文件排序

　　</div>

　　<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="FrameDiv" Width="2" TrackPosition="true" Opacity="0.3">

　　</cc1:DropShadowExtender>

　　名称

　　</div>

　　创建时间

　　</div>

　　类型

　　</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" %>

　　控件具体属性意义请查询百度。

教程首页更多教程