首页
所有分类
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 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
Js经典案例的实例代码
May 10 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 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
连接数(1) PV(1) ipv6(1) 访问日志(2) jenkins(1) 弱口令(1) 逆序(1) 进程假死(1) 线程(1) UV(1)
You might like
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
下一代Bootstrap的5个特点 超酷炫！
2016/06/17 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
详解小程序开发经验：多页面数据同步
2019/05/18 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
Python科学计算之Pandas详解
2017/01/15 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
详解利用OpenCV提取图像中的矩形区域（PPT屏幕等）
2019/07/01 Python
详解Python3 pickle模块用法
2019/09/16 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
python requests.get带header
2020/05/05 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
AVIS安飞士奥地利租车官网：提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
澳大利亚网上买书：Angus & Robertson
2019/07/21 全球购物
Antler英国官网：购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
课程改革实施方案
2014/03/16 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
让子弹飞观后感
2015/06/11 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python