イヌでもわかるJavaScript講座

【リスト】

<head>
<style type="text/css"><!--
A.menu:link    { color:#008b8b; text-decoration:none; }
A.menu:visited { color:#008b8b; text-decoration:none; }
A.menu:active  { color:#008b8b; text-decoration:none; }
A.menu:hover   { color:#ffff00; background-color:#ffa07a; text-decoration:none; }
--></style>
</head>

<body onload="myGetBrowser()">
<script language="JavaScript"><!--

myID = "myID_Menu";                  // DIVタグで付けたID

myObj = 0;           // 使用ブラウザのSTYLEオブジェクト用

function myGetBrowser(){            // ブラウザを判断する
   myOP = window.opera;             //OP
   myN6 = document.getElementById;  // N6 or IE
   myIE = document.all;             // IE
   myN4 = document.layers;          // N4

   if (myOP){                          // OP?
      document.onclick = myClickOP;
   }else if (myIE){                    // IE?
      document.ondblclick = myClickIE;
   }else if (myN6){                    // N6?
      window.addEventListener("dblclick",myClickN6,true);
   }else if (myN4){                    // N4?
      window.captureEvents(Event.DBLCLICK);
      window.ondblclick = myClickN4;
   }
}

function myClickOP(){  // OPで左クリック
  myObj=document.getElementById(myID).style;
  myObj.left = window.event.clientX + "px";
  myObj.top  = window.event.clientY + "px";
  myObj.visibility = "visible";
}
function myClickN6(myEvent){  // N6でＷクリック
  myObj=document.getElementById(myID).style;
  myObj.left = myEvent.clientX + window.pageXOffset + "px";
  myObj.top  = myEvent.clientY + window.pageYOffset + "px";
  myObj.visibility = "visible";
}
function myClickIE(){ // IEでＷクリック
  myObj=document.all[myID].style;
  myObj.left = window.event.clientX + document.body.scrollLeft + "px";
  myObj.top  = window.event.clientY + document.body.scrollTop + "px";
  myObj.visibility = "visible";
}
function myClickN4(myEvent){ // N4でＷクリック
  myObj=document[myID];
  myObj.left = myEvent.x ;
  myObj.top  = myEvent.y ;
  myObj.visibility = "visible";
}

function myHidden(){
  myObj.visibility = "hidden";
}
// --></script>

<!-- フローティングメニュー -->
<div id="myID_Menu" style="position:absolute; visibility:hidden;">
<table border="3" cellpadding="2" cellspacing="3" bgcolor="#C0C0C0">
<tr><td bgcolor="#008b8b">
<font color="#FFFFFF"><strong>イヌでもメニュー<br></strong></font>
</td></tr>
<tr><td bgcolor="#ffffcc">
<a class="menu" href="step1.htm" target="new">STEP.1</a><br>
<a class="menu" href="aisatu.htm" target="new">STEP.2</a><br>
<a class="menu" href="getdate.htm" target="new">STEP.3</a><br>
<a class="menu" href="function.htm" target="new">STEP.4</a><br>
<a class="menu" href="javascript:myHidden()">【閉じる】</a>
</td></tr>
</table>
</div>

ダブルクリックした位置にリンク用のフローティングメニューを表示してみます。

【使い方】

<BODY>タグに、onload="myGetBrowser()" を追加してください。
<body onload="myGetBrowser()">

<DIV>タグ内の<TABLE>タグを自分なりに作ってください。
その中の最後の<A>タグ、
<a class="menu" href="javascript:myHidden()">【閉じる】</a>
は、メニューを閉じるためのものです。削除せず、自分なりに残してください。

<HEAD>タグ内にリンク文字用のスタイルシート( <STYLE>タグ )があります。自分なりの色を設定してください。
<style type="text/css"></style>

以上で動くかな？

【説明】

myGetBrowser() にて、まず、OP、NS6 , IE4 , NS4 のブラウザを判断用変数を作りました。
myOP = window.opera;
myN6 = document.getElementById;
myIE = document.all;
myN4 = document.layers;

次にそれぞれのブラウザ用にイベントハンドラを設定していきます。

イベントとは、マウスを動かした、クリックしたとか、キーを押した、文字を入力した等のページに割り込みを行なったことをいいます

【一般的なイベントハンドラ一覧】

onmouseover	マウスカーソルが乗った
onmouseout	マウスカーソルが離れた
onmousemove	マウスカーソルが動いた
onmousedown	マウスボタンを押した
onmouseup	マウスボタンを離した
onclick	マウスボタンをクリックした
ondblclick	マウスボタンをダブルクリックした
onkeydown	キーを押した
onkeyup	キーを離した
onkeypress	キーを打った
onchange	フォームの値が変わった(入力した)
onselect	フォームの選択が変わった(選択した)
onsubmit	送信ボタンを押した
onreset	クリアボタンを押した
onfocus	フォーカスを獲得した
onblur	フォーカスを開放した

Ｎ６は、
window.addEventListener("dblclick" , myClickN6 , true);
イベントハンドラを追加するメソッド　addEventListener() を使用します。
第一パラメータは、イベント種別を文字列で渡します。イベントハンドラ一覧の on を取り除いた文字です。
第二パラメータは、処理する関数オブジェクト。関数の括弧 ( ) を取り除いてセットします。
第三パラメータは、true か false で、true は、キャプチャを行います。
例（サンプル）では、ダブルクリックイベント時に、Eventオブジェクトがパラメータとして渡された関数 myClickN6(myEvent) が呼ばれます。

Ｎ４は、
window.captureEvents(Event.DBLCLICK);
window.ondblclick = myClickN4;
の２行。
まず、windowに対して、captureEvents() を実行します。
パラメータは、イベントマスクをセットします。Event. に続いて、イベントハンドラ一覧の on を取り除いた文字を大文字で書き込みます。
２つ以上セットしたければ、
window.captureEvents(Event.DBLCLICK | Event.CLICK);
のように記述します。
次にイベントハンドラを設定します。
例（サンプル）では、ダブルクリックイベント時に、Eventオブジェクトがパラメータとして渡された関数 myClickN4(myEvent) が呼ばれます。

ＩＥは、
document.ondblclick = myClickIE;
IEは、Eventオブジェクトをイベントハンドラにパラメータとして渡さずに、window.event に格納されます。
例（サンプル）では、ダブルクリックイベント時に、関数 myClickIE() が呼ばれます。

ＯＰは、
document.onclick = myClickOP;
OPは、Eventオブジェクトをイベントハンドラにパラメータとして渡さずに、window.event に格納されます。
例（サンプル）では、左クリックイベント時に、関数 myClickOP() が呼ばれます。
【注意】OP6 は、ダブルクリックイベント( ondblclick )がサポートされていません。

この関数( myGetBrowser() ) を<BODY>タグに、onload にて呼び出して、初期セットさせます。
前回のサンプルをコピペで使いまわしなので、関数名が曖昧になっております。ぐははは～。(-o-メ) ピクピク

ダブルクリック時に呼ばれた関数「myClickN6( ) , myClickIE( ) , myClickN4( ) , myClickOP( )」は、お察しのとおり、ダブルクリック時のマウスカーソル位置に、<DIV>タグで囲った<TABLE>タグイメージを表示させます。
サンプルでは、こんなの ↓

イヌでもメニュー

座標計算は、Step.92 にて説明しています。

フローティングメニュー内の【閉じる】をクリックすると、myHidden( ) を呼ぶようにしています。
内容は、非表示( hidden )にしただけです。
よって、ダブルクリック時には、表示( visible )にする必要があります。

このフローティングメニュー(<DIV>)はホームページ上の適切な位置に置く必要があります。
古いバージョンのブラウザでは、ダブルクリックでメニューが出ないからです。

参考ステップ
Step.82 右クリックを禁止してみましょう
Step.92 マウスカーソルに何かくっつけましょう