実行例

どこでもいいから、ダブルクリックしてみそ

イヌでもメニュー

STEP.1

STEP.2

STEP.3

STEP.4

閉じる

<DIV id="popmenu" style="position:absolute; visibility:hidden;border-style:ridge;">
<DIV style="color:#FFFFFF;background-color:#8A2BE2;font-weight:bold;">イヌでもメニュー</DIV>
<DIV style="color:#000000;background-color:#FFFFCC;"><a href="step1.htm">STEP.1</a></DIV>
<DIV style="color:#000000;background-color:#FFFFCC;"><a href="aisatu.htm">STEP.2</a></DIV>
<DIV style="color:#000000;background-color:#FFFFCC;"><a href="getdate.htm">STEP.3</a></DIV>
<DIV style="color:#000000;background-color:#FFFFCC;"><a href="function.htm">STEP.4</a></DIV>
<DIV style="color:#000000;background-color:#FFFFCC;"><a href="javascript:myHidden()">閉じる</a></DIV>
</DIV>

<SCRIPT type="text/javascript"><!--
document.ondblclick = myDblClick;

function myDblClick( evt ){ // Ｗクリック
  myEvent = ( evt ) ? evt : window.event;
  myObj=document.getElementById ( "popmenu" ).style;
  myObj.left = myEvent.clientX + document.body.scrollLeft ;
  myObj.top  = myEvent.clientY + document.body.scrollTop ;
  myObj.visibility = "visible";
}

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

サンプルだけの HTMLはこちらへ

説明

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

フローティングメニュー(ポップメニュー) を作成します。

<DIV style="color:#FFFFFF; background-color:#8A2BE2; font-weight:bold;">イヌでもメニュー</DIV>

</DIV>

ダブルクリックのイベントをいじります。

document.ondblclick = myDblClick;

function myDblClick( evt ){

myEvent = ( evt ) ? evt : window.event;

myObj=document.getElementById ( "popmenu" ).style;

myObj.left = myEvent.clientX + document.body.scrollLeft ;

myObj.top = myEvent.clientY + document.body.scrollTop ;

myObj.visibility = "visible";

}

ダブルクリックしたら、myDblClick() を呼ぶようにします。
やってることは、マウスカーソルの位置に、フローティングメニューを表示してるだけ。
中身は、Step.88 をごっそり持ってきたので、そちらを参照してください。

フローティングメニュー内の閉じるを選択した場合は、単純にフローティングメニューを非表示にします。

function myHidden(){

myObj.visibility = "hidden";

}

フローティングメニューのリンクの上にマウスカーソルを合わせたらバックグラウンドカラーが反転するのはスタイルシート設定。
Step.41、Step.42 を参照。

参考ステップ
Step.74 画面右下にリンクバナーを固定表示してみましょう　
Step.88 リンク先の補足説明窓を表示してみましょう　
Step.92 マウスカーソルに何かくっつけましょう　

▲TOP

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

※ 古い情報

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() が呼ばれます。

※ OP6 は、ダブルクリックイベント( ondblclick )がサポートされていません。

▲TOP

Tips

●イベントのキャンセルについて

イベントには戻り値としてブール値を戻します。
イベントの戻り値として false を戻すとイベントのキャンセルとして処理されます。

例えば、

function myOK(){

return confirm ("本当に行ってしまうの？");

}

// --></SCRIPT>

<A href="menu.html" onclick="return myOK();">メニューへ</a>

は、「キャンセル」を選択すれば、"menu.html" へのリンク処理はされません。

<A href="menu.html" onclick="myOK();">メニューへ</a>

とすると、「OK」および「キャンセル」を選択しても、"menu.html" へリンクされます。
しかし、これはイベントに true が戻されたわけではありません。

<A href="menu.html">メニューへ</a>

は、イベントに true が戻されます。

▲TOP

実行例

リスト

説明

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

Tips