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

更新时间：2011年01月27日 15:52:45 作者：

本程序由一个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="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" %>
控件具体属性意义请查询百度。

鼠标右击

js实现淘宝首页的banner栏效果
这篇文章主要为大家详细介绍了js实现淘宝首页的banner栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
百度地图API之本地搜索与范围搜索
地图服务是指可以提供数据信息的接口，比如说本地搜索/路线规划等，下面介绍下百度地图API之本地搜索与范围搜索的相关知识，有需要的小伙伴可以来学习下
2015-07-07
微信小程序内拖动图片实现移动、放大、旋转的方法
这篇文章主要介绍了微信小程序内拖动图片实现移动、放大、旋转的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
js 控制下拉菜单刷新的方法
js 控制下拉菜单刷新的方法，需要的朋友可以参考一下
2013-03-03
JS简单获取客户端IP地址的方法【调用搜狐接口】
这篇文章主要介绍了JS简单获取客户端IP地址的方法,通过调用搜狐接口来简单实现获取访客IP地址的功能,非常简便实用,需要的朋友可以参考下
2016-09-09
JS控制弹出新页面窗口位置和大小的方法
这篇文章主要介绍了JS控制弹出新页面窗口位置和大小的方法,实例分析了open方法弹出窗口的使用技巧,需要的朋友可以参考下
2015-03-03
zTree树形插件异步加载方法详解
这篇文章主要为大家详细介绍了zTree树形插件异步加载的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
JavaScript实现旋转图像的三种方法介绍
在文档扫描Web应用中,我们需要旋转倾斜的或扫描方向错误的文档图像,这篇文章主要为大家整理了使用JavaScript旋转图像的三种方法,希望对大家有所帮助
2024-01-01
服务器安全设置的几个注册表设置
服务器安全设置的几个注册表设置...
2007-07-07
JavaScript编码风格指南(中文版)
写作本文旨在加深自己印象，也为了更多人的了解到JS编码风格，提高自己的编码质量。想了解更多的内容请阅读《编写可维护的JavaScript》
2016-08-08