右クリックの制御を行う2 - flandlescarlet's diary【情報工学生の備忘録】

予め用意して隠しておいた要素を呼び出す

前回の記事の続きとなります

まずこれまでで解説してきたなかで作られたソースはこれです

Sample1 右クリックのメニュー

<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>

次にJavaScriptで右クリックのイベントハンドラであるoncontextmenuを<body>タグと<script>タグ中に記述の方です

 <body oncontextmenu="関数名()">

 <script type="text/JavaScript"> document.oncontextmenu = 関数名; </script>

基本的にIEとその他のブラウザでの呼び出しに差があることまでが前回の内容です。

今回は右クリックしてその場に何時もとは異なるメニューを出したいと思います。

Sample2 マウスの位置座標取得とdisplay:noneの解除

function showMenu(e) {

    if(window.event){
        menu1.style.display = "";
	    menu1.style.left = event.clientX;
	    menu1.style.top  = event.clientY;
	    return false;
    }
    else{
        menu1.style.display = "";
	    menu1.style.left = e.clientX;
	    menu1.style.top  = e.clientY;
	    return false;
    }
}

これが右クリック呼び出しの関数になります。

説明としてはIEとFirefox郡のブラウザをわけるためにif~elseを使います。

IEではwindow.eventを採用して他のブラウザは引数式での分岐となります。

まず<div id="menu1">のDOM概念としてスタイルにアクセスしますそこでdisplay:noneさせておいたものを空文字により非表示を表示に変えます。

次にマウスの位置座標を取得します。これはclientでマウスカーソルの位置を取得してそれをスタイルシートでいう、(top,left,right,bottom)の値として代入します。

最後に念のためfalseを設置して本来の右メニューを抑えておきます。

ここまでの実行結果はこちら(Firefox郡のブラウザで確認ください)

http://yatagarasu0495.web.fc2.com/javascript/blog/clickmenu/01.html

こちらのDemoサイトでは補足でスタイルシートも反映させてます。

hover時にbackgroundを#333にそしてカーソルをポインターにしてます。

しかしIEでは二重の<div>タグの内容が反映されないため適応されない問題があります。

右クリックをしてメニューが出る事が確認できると思います。本来の右クリックメニューも制御できています。

しかし消すことが出来ないので関数を追加してみます。

Sample3 右クリック削除関数を作る

 function deleteMenu(){

		menu1.style.display = "none";

}

document.onclick = deleteMenu;

これにより、クリックした時にメニューをまたdisplay:noneさせて削除させる事が可能となります。

では趣旨である右クリックの簡単な制御をやっていきたいと思います。

メニュ用のために大きく囲った<div>タグの入れ子にしてあるタグにonClick要素をつけて終わりです。

今回は概要を表すためにあえてalert関数で結果を見てもらおうと思います。

http://yatagarasu0495.web.fc2.com/javascript/blog/clickmenu/02.html

Sample4 全部のソース

<html>
<head>
<title>メニュー表示</title>
<style type="text/css">
div.contentMenu{
	cursor: pointer;
}
div.contentMenu:hover{
	background: #333;
}
</style>
</head>
<body oncontextmenu="showMenu();return false;" onclick="deleteMenu()">

<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 class="contentMenu" onClick="effectMenu('東方')">東方</div>
<hr style="border: solid #AAA 1px">
<div class="contentMenu" onClick="effectMenu('紅魔郷')">紅魔郷</div>
<div class="contentMenu" onClick="effectMenu()">地霊殿</div>
<hr style="border: solid #AAA 1px">
<div class="contentMenu" onClick="effectMenu('緋想天')">緋想天</div>
<div class="contentMenu" onClick="effectMenu('風神録')">風神録</div>
</div>

<script type="text/JavaScript">

var date;
menu1 = document.getElementById("menu1");

function showMenu(e) {
	if(window.event){
		menu1.style.display = "";
		menu1.style.left = event.clientX;
		menu1.style.top  = event.clientY;
		return false;
    	}
	else{
		menu1.style.display = "";
		menu1.style.left = e.clientX;
		menu1.style.top  = e.clientY;
		return false;
	}
}

function deleteMenu(){

	menu1.style.display = "none";

}

function effectMenu(date){

	alert(date);

}

document.oncontextmenu = showMenu;
document.onclick = deleteMenu;

</script>

</body>
</html>

無事にIEも含め全ての代表的なブラウザには適応されることが確認できると思います。

今までの右クリックの概要として大事なことは

本来の右クリックが使えないためユーザーにストレスが溜まる
改良によっては面白いユーザーサポートができる
メニューのデザインが豊富

といった事があげられます。

せっかくの右クリックですから一番最初のユーザーにストレスが溜まらないようにする

右クリックを次回に回したいと思います。