首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 27, 2011

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 #Javascript
JavaScript 注册事件代码
Jan 27 #Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游，火狐
Jan 27 #Javascript
EXT窗口Window及对话框MessageBox
Jan 27 #Javascript
基于jquery的表头固定的若干方法
Jan 27 #Javascript
jquery animate图片模向滑动示例代码
Jan 26 #Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 #Javascript
PL660(1) 南麂列岛(1) S2000(3) SRF-S83(1) 根德(2) 直流胆(1) MX500(1) 森海(1) SRF-S84(1) 台湾(1)
You might like
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php通用防注入程序 推荐
2011/02/26 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php实现微信扫码支付
2017/03/26 PHP
php7下的filesize函数
2019/09/30 PHP
一个javascript参数的小问题
2008/03/02 Javascript
JS判定是否原生方法
2013/07/22 Javascript
javascript打印输出json实例
2013/11/11 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
Python多进程机制实例详解
2015/07/02 Python
Python实现telnet服务器的方法
2015/07/10 Python
用Python进行简单图像识别（验证码）
2018/01/19 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python 实现3种回归模型（Linear Regression，Lasso，Ridge）的示例
2020/10/15 Python
python 如何设置守护进程
2020/10/29 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
优秀交警事迹材料
2014/01/26 职场文书
医学类个人求职信范文
2014/02/05 职场文书
军训教官感言
2014/03/02 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android