마우스 오른쪽 클릭 이벤트 코드(asp.net 배경)_javascript 기술-JS 튜토리얼-php.cn

마우스 오른쪽 클릭 이벤트 코드(asp.net 배경)_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:11:29

원래의

1118명이 탐색했습니다.

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; >=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.display="block";
//보조 메뉴 숨기기
document.getElementById("ChildDiv").style.display="none"
return false;// 코드는 event.returnValue=false와 같습니다.
}
//마우스는 메뉴를 선택합니다. 매개변수 설명: arg는 메뉴 Div, imageUrl은 대체할 이미지 주소를 참조하고, 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","")); 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=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!=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 " %> 
 
 제목 없는 페이지 
 
 > 
 :ScriptManager> 

파일 정렬
< /div> 

이름

생성시간

유형

크기

 ; 

다음 문장에 유의하세요. 
 
이 컨트롤은 ASP.NET AJAX1.0에서 그림자 효과를 구현하는 컨트롤이므로 aspx 페이지에 컨트롤 등록을 추가해야 합니다. 
<%@ 등록 Assembly="AjaxControlToolkit " Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
컨트롤의 특정 속성 의미는 Baidu를 확인하세요.