ホームページ > ウェブフロントエンド > jsチュートリアル > マウス右クリック イベント コード (asp.net バックグラウンド)_JavaScript スキル

マウス右クリック イベント コード (asp.net バックグラウンド)_JavaScript スキル

WBOY
リリース: 2016-05-16 18:11:29
オリジナル
1153 人が閲覧しました

js コードは次のとおりです。

コードをコピー コードは次のとおりです。

< script type="text/ javascript">
//右クリック メニューを無効にする
document.oncontextmenu=ContextMenu;
//マウスの右クリック イベント
function ContextMenu()
{
// 表示されるメニューの座標として 2 つの変数を作成します
var x;
var y;
// メニュー (以下、パネルと呼びます) の外部 Div を取得します
var FramePanel=document.getElementById("FrameDiv");
//パネルの幅と高さを取得します
varPanelWidth=parseInt(FramePanel.style.width.replace("px","")); 🎜>varPanelHeight=parseInt(FramePanel.style.height.replace("px ",""));
//マウス座標を取得します
var MouseX=event.clientX;
var MouseY=even; .clientY;
//Web ページウィンドウの幅と高さを取得します
var WindowWidth=document.body.offsetWidth;
var WindowHeight=document.documentElement.offsetHeight; >=WindowWidth)
{
x=MouseX-PanelWidth-20;
}
else
{
x=MouseX>}
//マウスの Y 座標パネルの高さ > Web ページ ウィンドウの高さの場合、パネルの上部には
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";//これcode は、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)
{
//作成メニューが表示される座標として 2 つの変数
var x;
var y;
//サブメニュー Div (以下、サブパネルと呼びます) を取得します
var ChildPanel=document.getElementById(childPanelId) ;
//debugger;
//サブパネルの幅と高さを取得します
var ChildPanelWidth=parseInt("px","")); ChildPanelHeight=parseInt(ChildPanel.style.width.replace("px","") );
//親メニュー Div (以下、親パネルと呼びます) を取得します
var FramePanel=event.srcElement;
//親パネルの幅と高さを取得します
varPanelWidth=FramePanel.offsetWidth;
varPanelHeight=FramePanel.offsetHeight;
//マウス座標を取得します
var MouseX=event; .clientX;
var MouseY=event.clientY;
//親パネルのマウスオフセット位置を取得します
var MouseOffsetHeight=event.offsetY; //Web ページウィンドウの幅と高さを取得します
var WindowWidth=document.body.offsetWidth;
var WindowHeight=document .documentElement.offsetHeight
//マウス
x=MouseX; -MouseOffsetWidth-ChildPanelWidth-3;
}
else
{
x=MouseX-MouseOffsetWidthPanelWidth-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 の DOM 要素、
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";
}



ページの ASPX コードは次のとおりです:
コードをコピーします コードは次のとおりです:

<%@ ページ言語="C#" AutoEventWireup="true" CodeFile="ContextMenu.aspx.cs" Inherits="ContextMenu" %>
<%@ アセンブリの登録="AjaxControlToolkit" 名前空間=" AjaxControlToolkit" TagPrefix="cc1 " %>



無題ページ
>

:ScriptManager>


新しいフォルダーを作成します








;






作成時間






;



次の文に注目してください:


このコントロールは ASP.NET AJAX1.0 でシャドウ効果を実装するコントロールであるため、aspx ページにコントロールの登録を追加する必要があります:
<%@ Register Assembly="AjaxControlToolkit " Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
コントロールの特定の属性の意味については、Baidu を確認してください。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート