首頁 > 開發者 > ASP

滑鼠右擊事件代碼(asp.net後台)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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" %>
控制項具體屬性意義請查詢百度。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More