flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

右クリックの制御を行う

正確に言うと埋め込み式のスタイルシートを呼び出す

とりあえず初めは、右クリックした時の要素となるメニューを製作します。

囲いとしては

<div style="">   

  <div>メニュー1</div>
  <div>メニュー2</div> 

  <hr>

  <div>メニュー3</div>

</div>

主軸のメニューとしてdivを作成して

その中に各パーツを流し込んでいく感じです。

この時主軸のdivタグは反映されないようにdisplay:noneを指定するのがミソです。

ついでに右クリックを呼び出すイベントハンドラのoncontextmenuも用意しますが

IEとfirefoxでかなりの仕様の違いがあるため方法を二通り用意します。

 <body oncotextmenu="関数();false"> //IE対応用
 document.oncontextmenu = 関数; //Firefox

ちなみにfalseの論理値を付けることにより従来の右クリックを

読み出さないようにしてくれます。

では呼び出した関数はこれとしましょう

 <div id=menu1 style="position:absolute;display:none;border: 1px outset #EEE;border-left: solid 10px #000;width:220;background:#DDD;padding-left:3px;font-size: 0.8em">
<div>東方</div>
<hr style="border: solid #AAA 1px">
<div>紅魔郷</div>
<div>地霊殿</div>
<hr style="border: solid #AAA 1px">
<div>緋想天</div>
<div>風神録</div>
</div>

こんな感じになります。 続きは次回に