首页
所有分类
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中this的使用说明
Sep 06 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
node.js实现登录注册页面
Apr 08 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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
BufferPool(1) keeplive_timeout(1) 复合索引(1) location(2) 逻辑函数(1) 连接查询(1) 缓存机制(1) http_stub_status_module(1) zabbix(9) 数据合并(1)
You might like
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript JSON操作入门实例
2010/04/16 Javascript
Javascript学习笔记之 对象篇（三） : hasOwnProperty
2014/06/24 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
微信小程序（三）：网络请求
2017/01/13 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
利用Python获取操作系统信息实例
2016/09/02 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python 阶乘累加和的实例
2019/02/01 Python
python实现在线翻译功能
2020/03/03 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
python利用opencv实现颜色检测
2021/02/23 Python
is_file和file_exists效率比较
2021/03/14 PHP
亚马逊印度站：Amazon.in
2017/10/15 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
会计自我鉴定范文
2013/10/06 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
六查六看六改心得体会
2014/10/14 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
赞美教师的句子
2019/09/02 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript