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

所属分类：网络编程 / JavaScript 阅读数： 1278

收藏 0赞 0分享

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="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" 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;width: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="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" 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" %>
控件具体属性意义请查询百度。

更多精彩内容其他人还在看